Question

我试图使用bootstrap对齐井内的字符串和下拉菜单。我希望字符串（＆＃34; 1.0 HEADER）位于最左侧，然后下拉菜单位于最左侧。但是目前Dropbox位于标题下方。我尝试过使用CSS float而没有任何成功。

  <div class="well well-sm well-gapHeader" >
    <span style:"float:left" >1.0 HEADER</span>

    <div ng-controller="DropdownCtrl">
      <div class="btn-group" dropdown is-open="status.isopen">
        <button type="button" class="btn btn-primary dropdown-toggle" style="float:right" dropdown-toggle ng-disabled="disabled">
          DROPBOX<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li ng-click="gapHeader.isApplicable=true"><a href="#">Applicable</a></li>
          <li ng-click="gapHeader.isApplicable=false"><a href="#">Not-Applicable</a></li>
        </ul>
      </div>
    </div>

  </div>

我使用Angular与Bootsrap和UI Bootstrap

Answer 1

您可以使用pull-left和pull-right辅助类来向左和向右浮动元素。您需要clearfix上的well类才能使其包含浮动元素。

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="well well-sm well-gapHeader clearfix">
  <span class="pull-left">1.0 HEADER</span>

  <div ng-controller="DropdownCtrl" class="pull-right">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        DROPBOX<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li ng-click="gapHeader.isApplicable=true"><a href="#">Applicable</a>
        </li>
        <li ng-click="gapHeader.isApplicable=false"><a href="#">Not-Applicable</a>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

另一个选择是在井内添加一个包含两列的row，并将每个元素放在各自的列中。

P.S。由于您有拼写错误，浮动在您的示例中不起作用。 :中的style:"float:left"应该是= style="float:left"

Bootstrap Well Aligning Text和Dropdown菜单

1 个答案: