如何在一個div中對齊標籤和其他對應文本框？

如何製作響應式網站，其中一個div中的標籤和其他相應的文本框。我已經寫了一小段代碼。它的工作（對於MD設備），但是當窗口大小被調整大小時，它的格式不正確（兩個標籤都聚合在一起）。如何更正此問題（對於xs設備）？ PFB的截圖。如何在一個div中對齊標籤和其他對應文本框？

<html> 
    <head> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <form role="form"> 


      <div class="row"> 
       <label class="col-md-4 col-xs-12" for="TextArea">Text Area</label> 
       <label class="col-md-4 col-xs-12" for="TextArea">Text Area</label> 
      </div> 
      <div class="row"> 
       <div class="col-md-4 col-xs-12"> 
       <textarea class="form-control" id="TextArea"></textarea> 
       </div> 
       <div class="col-md-4 col-xs-12"> 
       <textarea class="form-control" id="TextArea"></textarea> 
       </div>     
      </div> 

      </form> 
     </div> 
    </body> 
</html>

來源

2015-02-24 Aditya

你應該把你的標籤每個div裏面包含textarea標籤。

<form role="form">    
    <div class="row"> 
    <div class="col-md-4 col-xs-12"> 
     <label for="TextArea1">Text Area</label> 
     <textarea class="form-control" id="TextArea1"></textarea> 
    </div>        
    <div class="col-md-4 col-xs-12"> 
     <label for="TextArea2">Text Area</label> 
     <textarea class="form-control" id="TextArea2"></textarea> 
    </div>     
    </div> 
</form>

Test it here（幻燈片JSFiddles縱軸來模擬你需要的環境大小）

來源

2015-02-24 06:33:32

順便說一句，我只是複製你的代碼，並改變它一點點。但我沒有注意到你拿到了具有相同ID的物品。我知道這是一個例子，但你應該知道不要有相同的ID。 – 2015-02-24 06:42:32

亞我知道...只是爲了測試:) – Aditya 2015-02-24 06:45:24

是的，只是良好的做法，併爲未來的「複製和粘貼」。 – 2015-02-24 06:48:42

如何在一個div中對齊標籤和其他對應文本框？

回答

相關問題