帶有輸入文字的引導按鈕下拉框

Question

我是新手引導。我正在創建一個水平表單，其中我需要將按鈕下拉列表放置在左側，輸入文本位於右側。我已經編寫了代碼，但由於某種原因，按鈕下拉菜單位於右側，輸入文本位於左側。下面是代碼：

<div class="form-group"> 
    <div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    Categories <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 
<div class="col-sm-offset col-sm-10"> 
    <input type="text" class="form-control" placeholder="Enter Debate Name"> 
</div> 

它是什麼，我的思念？

Answer 1

原因是btn-group div沒有列坐在裏面。進行此更改：

<form class="form-horizontal" role="form"> 
    <div class="col-sm-2"> <!--Wrap this button group in a col --> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       Categories <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> <!-- /col-sm-2 --> 
    <div class="col-sm-10"> <!--Offsets work like cols they require a value for how many cols to offset --> 
     <input type="text" class="form-control" placeholder="Enter Debate Name"> 
    </div> 
</form> 

當使用Bootstrap「開箱即用」時，所有col值的組合應該合計爲12，包括任何偏移量。如果它們加起來超過12，則最後一列將被包裹。如果少於12，並且會有差距。由於cols有左浮動應用於他們，在你的情況下，與col-sm-10的div向左浮動並佔據10個網格列，允許2爲空。因爲沒有什麼可以清除浮動，所以btn-group div浮動在它旁邊。另外，要注意的是，如果要使用偏移量，它們的行爲與列相同，並佔用特定數量的網格列。這意味着你需要告訴他們有多少個這樣的列：.col-md-offset-*用一個數字代替*。如果你想使用你的榜樣偏移您可以將上面的改變是這樣的：

<div class="col-sm-9 col-sm-offset-1"> <!--2 grid cols for the button group + 9 + 1 for the input = 12 --> 
    <input type="text" class="form-control" placeholder="Enter Debate Name"> 
</div> 

最後，你應該注意的是，類的-sm-部分意味着你的列將這樣的表現對於所有屏幕寬度超過767px，低於此值時，按鈕將位於輸入頂部。