如何将列向右对齐？

Question

我正在了解 twitter bootstrap 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>

问题是我无法将第二列放在下拉列表的右侧。所以我想在第一列和第二列中的下拉列表中显示“为什么这是……”文本。这是什么原因造成的？这是完整 sn-p 的参考：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

这可能会解决问题

<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

Answer 3

<!--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 4

在您的示例中复制此代码并将预览窗口划到左侧。

<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