引導：下拉不會去上一個新行

我試圖創造一種形式，但出於某種原因，我不能得到多個下拉菜單來正確顯示在另一個下方。這裏是我的代碼：

  <div class="form-group" style="display: block;"> 
      <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label> 
      <div class="col-md-4 col-sm-4 col-xs-8"> 
       <select name="data[step1][1]" class="form-control col-md-7 col-xs-12" 
         id="step1.1"> 

        <option value="1">1</option> 
        <option value="x">X</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group" style="display: block;"> 
      <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label> 
      <div class="col-md-4 col-sm-4 col-xs-8"> 
       <select name="data[step1][2]" class="form-control col-md-7 col-xs-12" 
         id="step1.2"> 

        <option value="2">2</option> 
        <option value="x">X</option> 
       </select> 
      </div> 
     </div>

我不知道我做錯了什麼......

來源

2016-09-30 NsD

當您使用Bootstrap時，其網格系統有12列。因此，要正確顯示下一行的下拉列表，即下一行，您必須完成所有12行。

在您的代碼中，您使用3列（col-md-3）作爲標籤，4列（col-md-4）用於選擇框。所以總數是3 + 4 = 7，因爲剩下的5列是剩下的。因此，而不是使用COL-MD-4，使用COL-MD-9，完成電網

這裏去正確的代碼： -

<div class="form-group" style="display: block;"> 
 
\t <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label> 
 
\t <div class="col-md-9 col-sm-9 col-xs-8"> 
 
\t \t <select name="data[step1][1]" class="form-control col-md-7 col-xs-12" 
 
\t \t \t id="step1.1"> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="x">X</option> 
 
\t \t </select> 
 
\t </div> 
 
</div> 
 
<div class="form-group" style="display: block;"> 
 
\t <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label> 
 
\t <div class="col-md-9 col-sm-9 col-xs-8"> 
 
\t \t <select name="data[step1][2]" class="form-control col-md-7 col-xs-12" 
 
\t \t \t id="step1.2"> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="x">X</option> 
 
\t \t </select> 
 
\t </div> 
 
</div>

來源

2016-09-30 18:32:39 Shashank

這裏有2種方式，你可以這樣做：http://pastebin.com/XivnbbHE

我不知道，如果你想元素彼此內嵌，或者一個在另一個之上，所以我包含了這兩個元素。您可以使用引導程序類inline或form-inline來實現此目的。與第一個，選擇是非常狹窄的。你可以解決這個問題。

來源

2016-09-30 18:29:52

引導使用12列布局，請參閱Bootstrap網格示例here

對於您的情況，您使用的標籤爲col-md-3，輸入爲col-md-4，因此會生成7個網格。你應該使用col-md-4和col-md-8或完成12個網格的東西。 sm和xs

嘗試http://shoelace.io檢查網格。

來源

2016-09-30 18:33:26 Rohit

引導：下拉不會去上一個新行

回答

相關問題