Question

我正在关注twitter bootstrap 3，特别是列设置。我在同一行上有两列：

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

您可以添加＆＃39; text-right <div class="col-md-6 form-group"> col-md-6 请看这里

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

如果你想在小型设备上有50％的屏幕列

将col-xs-6更改为import simplejson as json json_string = """{"operandos":[ { "extremoInferior":"somevalue1", "extremoSuperior":"somevalue2" }, { "extremoInferior":"somevalue3", "extremoSuperior":"somevalue4" }] }""" json_data = json.loads(json_string) print "Complete Dict: " print json_data print "operandos -> extremoInferior: " print json_data['operandos'][0]['extremoInferior']

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

如何将列对齐到右边？

4 个答案: