我在这里有一个简单的演示:

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

我有一个无序的列表和每个列表项目,我希望有文本在左边,然后一个右对齐按钮。我曾尝试使用拉右,但这完全混乱了对齐。我做错了什么?

<链接href=“http://twitter.github.com/bootstrap/assets/cssstrap.css”“terlesheet”/> <德> <li>One <输入级=“btn pullright”值=“测试”></li> <li> 2 < <输入级=“btn -right引体”值=“test2”</li> < /德>


当前回答

现在你需要在现有的.dropdown-menu元素中添加.dropdown-menu-right。不再支持右拉。

更多信息请点击这里http://getbootstrap.com/components/#btn-dropdowns

其他回答

添加到公认的答案,当在容器和列中工作时,从bootstrap中内置了填充,我有时会有一个完整的拉伸列,其中有一个子div,它可以进行拉取。

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

或者,将所有列相加为网格列的总数(默认为12),并偏移第一列。

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

问题是您将按钮用作列表的一部分。因为列表项之间的垂直边距太低,无法将按钮放置在中间,它会使对齐混乱。我将把一个按钮放在列表的顶部,另一个按钮放在它们下面,这样它看起来就像你所期望的那样!

<ul>
<input class="btn pull-right" value="test">
<li>One</li> 
<li>Two</li>
<input class="btn pull-right" value="test2"> 
</ul>
<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>

在Bootstrap 4中:在Flexbox中尝试这种方式。参见getbootstrap中的文档

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

对于bootstrap 5.1.3,属性float-end适用于我:

<div class="row mt-2 float-end">
    <div class="col-md-12">
        <button class="btn btn-warning" >Do something else</button>
        <button class="btn btn-primary ml-2">Do primary action</button>
    </div>
</div>