Question

我无法正确对齐这两列。

有关如何让第一列左对齐，第二列右对齐，并且仍有下拉弹出窗口显示在正确位置的任何建议？

这是一个bootply：http://www.bootply.com/HV42nstWTG

Answer 1

在下拉列表周围添加一个包装。

代码：

<div class="container-fluid">
  <div class="row">
    <!-- This column should be left-aligned on the screen -->
    <div class="col-md-2">
      left-aligned content should go here
    </div>
    <!-- the content in this column should be right-aligned on the screen -->
    <div class="col-md-10">
      <div class="wrapper pull-right">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support
            <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul> <a href="#">text for a link goes here</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

它很简单，只需删除 - 向右拉，并在第二列上添加md偏移量。这应该工作。祝你好运！

<div class="container-fluid">

    <div class="row">
      <!-- This column should be left-aligned on the screen -->
      <div class="col-md-2">
        left-aligned content should go here
      </div>
      <!-- the content in this column should be right-aligned on the screen -->
      <div class="col-md-4 col-md-offset-6">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support
            <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul> <a href="#">text for a link goes here</a>
        </div>
      </div>
    </div>
</div>

Answer 3

您也可以这样做。更改文本链接和下拉列表的顺序，并在两者上使用pull-right。

<div class="container-fluid">

    <div class="row">
      <!-- This column should be left-aligned on the screen -->
      <div class="col-md-2">
        left-aligned content should go here
      </div>
      <!-- the content in this column should be right-aligned on the screen -->
      <div class="col-md-10">
        <a href="#" class="pull-right">text for a link goes here</a> 
        <div class="dropdown pull-right"> 
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support
            <span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
          &nbsp;
        </div>
      </div>
    </div>
</div>

http://www.bootply.com/GPbPh3Ajm1

Bootstrap：左右对齐，包括下拉列表

3 个答案: