如何將列對齊？

Question

我在twitter引導程序3附近找到我的頭，特別是列設置。我在同一行上得到了2列：

<!--datetime row--> 
    <div> 
    <div class="col-md-6 form-group"> 
     <label for="">Title:</label> 
     <div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 
       aria-expanded="true"> 
      Dropdown 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-md-6 form-group"> 
     why is this left instead of right aligned?? 

    </div> 
    </div> 

問題是我無法讓第二列坐在右側的下拉列表中。所以我想在第一欄和第二欄的下拉菜單中選擇'爲什麼是這個...'文本。這是什麼原因？這裏是一個裁判的全部片段：http://plnkr.co/edit/tufLd2?p=preview

Answer 1

您可以添加'text-right您<div class="col-md-6 form-group"> 請看這裏

http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview

，如果你想在小有屏幕的50％，列連設備

變化col-md-6到col-xs-6

http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview

Answer 2

<!--datetime row--> 
    <div **class="row"**> 
    <div class="col-md-6 form-group"> 
     <label for="">Title:</label> 
     <div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 
       aria-expanded="true"> 
      Dropdown 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-md-6 form-group"> 
     why is this left instead of right aligned?? 

    </div> 
    </div> 

Answer 3

將示例代碼複製到示例中，並將預覽窗口拖到左側。

<form class="form-horizontal"> 
<div class="form-group"> 
    <label for="" class="col-sm-2 control-label">Title:</label> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 
      aria-expanded="true"> 
     Dropdown 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
    </div> 
</div> 
<div class=" form-group"> 
    why is this left instead of right aligned?? 

</div> 

Live example

Answer 4

這可能解決問題

<div> 
    <div class="col-xs-6 form-group"> 
     <label for="">Title:</label> 
    </div> 
    <div class="col-xs-6 form-group text-right"> 
     <div class="dropdown"> 
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 
      aria-expanded="true"> 
      Dropdown 
      <span class="caret"></span> 
      </button> 

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="col-md-6 form-group"> 
     why is this left instead of right aligned?? 
    </div> 
</div> 

Live Demo