Bootstrap中的標籤覆蓋文本框

Question

我相對比較新，不得不實際設計網頁樣式，而我在使用Bootstrap時遇到了問題。如下面的bootply所示，使用引導列和一些自定義樣式的簡單頁面會導致標籤在調整頁面大小時與文本框重疊 - 例如，嘗試縮小頁面的寬度。我錯過了什麼導致了這種行爲？

http://www.bootply.com/ttuZZWim70

謝謝！

Answer 1

如果您試圖創建一個水平表單，您將需要添加適當的Bootstrap水平表單類。例子可以在Horizontal Form找到。你會想要在表單元素上使用類似於form-horizontal類的類似於以下內容的html，並使用form-group來標記每組標籤/輸入。您可以根據需要調整col-sm-*以組織您的佈局。最好的做法是儘量讓你的列定義col-*-*加起來爲12.兩個得到兩個form-group顯示在一行上，你可以利用類似col-md-6的東西包裹在每個form-group周圍。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <form class="form-horizontal"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="inputEmail3" placeholder="Test"> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="inputEmail3" placeholder="Test"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

這是一個jsfiddle顯示了一個例子。您需要擴展結果窗口以便能夠並排查看元素。橫向表單元素佔據了相當大的空間，所以我可能會建議給每個自己的獨立行添加類似於bootstrap上的示例。

讓我知道是否有幫助。 謝謝！

Answer 2

複製並粘貼到您的代碼中確保它能正常工作。

     <div class="form-group field"> 
          <label>Email Address</label> 
          <input type="text" class="form-control" placeholder="Email Address"> 
         </div> 

Answer 3

你可以試試下面的鏈接。

fiddle

<form class="well span12"> 
 
    <div class="row"> 
 
     <div class="span6"> 
 
     <label>Long name test 1</label> 
 
     <input type="text" class="span6"> 
 
     <label>Long name test 3</label> 
 
     <input type="text" class="span6"> 
 
     </div> 
 
     <div class="span6"> 
 
     <label>Long name test 2</label> 
 
     <input type="text" class="span6"> 
 
     <label>Long name test 4</label> 
 
     <input type="text" class="span6"> 
 
     </div> 
 
    </div>   
 
</form>