twitter-bootstrap - 如何让我的 Twitter Bootstrap 按钮右对齐？

Question

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

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

我有一个无序列表，对于每个列表项，我希望在左侧有文本，然后是右对齐按钮。我曾尝试使用 pull-right 但这完全弄乱了对齐方式。我究竟做错了什么？

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
<ul>
  <li>One <input class="btn pull-right" value="test"></li>
  <li>Two <input class="btn  pull-right" value="test2" </li>
</ul>

score 756 · Accepted Answer

插入pull-right类属性并让引导程序排列按钮。

对于Bootstrap 2.3，请参阅：http : //getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right。

对于Bootstrap 3，请参阅：https ://getbootstrap.com/docs/3.3/css/#helper-classes > Helper 类。

对于Bootstrap 4，请参阅：https ://getbootstrap.com/docs/4.0/utilities/float/#responsive

该pull-right命令已被删除并替换为float-right或一般地float-{sm,md,lg,xl}-{left,right,none}

score 256 · Accepted Answer

256

在 twitter bootstrap 3 中尝试类pull-right

class="btn pull-right"

于 2014-01-25T12:25:02.097 回答

score 149 · Accepted Answer

“pull-right”类可能不是正确的方式，因为 in 使用“float:right”而不是 text-align。

检查 bootstrap 3 css 文件，我在第 457 行找到了“text-right”类。这个类应该是将文本向右对齐的正确方法。

一些代码：

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

score 79 · Accepted Answer

2019 年更新 - 引导 4.0.0

该pull-right课程现在float-right在 Bootstrap 4 中...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

最好不要对齐 ul 列表并为行使用块元素。

float-right还没有工作吗？

请记住，Bootstrap 4 现在是 flexbox，并且许多元素display:flex会阻止 float-right 工作。在某些情况下，util 类喜欢align-self-end或ml-auto用于右对齐 flexbox 容器内的元素，如 Bootstrap 4 .row、Card 或 Nav。

还要记住，它text-right仍然适用于内联元素。

Bootstrap 4 右对齐示例

引导程序 3

使用pull-right类。

score 19 · Accepted Answer

使用button标签而不是input使用pull-right类。

pull-right类完全弄乱了你的两个按钮，但你可以通过在右侧定义自定义边距来解决这个问题。

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

然后对类使用以下 CSS

.RbtnMargin { margin-left: 5px; }

score 19 · Accepted Answer

除了接受的答案之外，在从引导程序内置填充的容器和列中工作时，我有时会有一个完整的拉伸列，其中包含一个子 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>

score 12 · Accepted Answer

很抱歉回答一个较旧的已经回答的问题，但我想我会指出你的 jsfiddle 不起作用的几个原因，以防其他人检查它并想知道为什么接受的答案中描述的 pull-right 类不不在那里工作。

bootstrap.css 文件的 url 无效。（也许当你问这个问题时它起作用了）。
您应该将属性： type="button" 添加到您的输入元素，否则它不会被呈现为按钮 - 它将被呈现为输入框。更好的是，改用该<button>元素。
此外，由于 pull-right 使用浮动，您会得到一些令人震惊的按钮布局，因为每个 LI 没有足够的高度来容纳按钮的高度。向 LI 添加一些 line-height 或 min-height css 可以解决这个问题。

工作小提琴：http: //jsfiddle.net/3ejqufp6/

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

（我还为按钮添加了最小宽度，因为由于宽度不同，我无法忍受按钮右对齐的参差不齐的外观:)）

score 11 · Accepted Answer

使用 Bootstrappull-right助手对我们不起作用，因为它使用float: right，它强制inline-block元素变为block。当.btns 变成时block，它们失去了inline-block作为准文本元素提供它们的自然边距。

因此，我们改为direction: rtl;在父元素上使用，这会导致该元素内的文本从右到左inline-block布局，这也会导致元素从右到左布局。您可以像下面这样使用 LESS 来防止孩子也被布置rtl：

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

并像这样使用它：

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

score 9 · Accepted Answer

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

score 8 · Accepted Answer

对于引导程序 5：

文档：https ://getbootstrap.com/docs/5.0/utilities/float/

在.float-end元素中用于右对齐。.clearfix如果您将前一个按钮移动到右侧并且不希望以下元素向上滑动，则可能必须添加父元素。

score 4 · Accepted Answer

为按钮应用pull-right类。 http://getbootstrap.com/css/#helper-classes-floats -> 助手类

此链接将有所帮助

score 4 · Accepted Answer

从 v3.1.0 开始，Pull right 已贬值。只是一个抬头。

http://getbootstrap.com/components/#callout-dropdown-pull-right

score 3 · Accepted Answer

现在您需要添加.dropdown-menu-right到现有.dropdown-menu元素。pull-right不再支持。

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

score 2 · Accepted Answer

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

一种方法是将此样式应用于您的列表项，以使它们保持内联

或者

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

在 CSS 中

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

score 2 · Accepted Answer

您可以在引导 CSS 之外尝试自定义 CSS 以查看是否有任何更改。尝试

.move-rigth{
    display: block;
    float: right;
}

如果它有效，那么您可以尝试操纵您拥有的内容或添加其他格式并实现您想要的。因为您正在使用引导程序并不意味着如果它不能为您提供您想要的东西，那么您只需管理它。你正在使用你的代码，所以你命令它按照你说的去做。干杯!

score 2 · Accepted Answer

您还可以使用空白列在左侧留出空格

像

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

演示 :: Jsfiddle 演示

score 1 · Accepted Answer

从Bootstrap V3.3.1 开始，以下 CSS 样式将解决此问题

.modal-open{
    padding-right: 0 !important;
}

注意：我尝试了上面帖子中的所有建议，并且都解决了旧版本，并且不提供对 newset 引导版本的修复。

score 1 · Accepted Answer

1

<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>

于 2021-03-17T14:07:44.670 回答

score 0 · Accepted Answer

问题是您将按钮用作列表的一部分。并且由于列表项之间的垂直边距太低而无法将按钮放置在它们之间，因此会弄乱对齐方式。我会将其中一个按钮放在列表顶部，另一个放在它们下方，这样它看起来就像您期望的那样！

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

score -1 · Accepted Answer

对于 bootstrap 4文档

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>

twitter-bootstrap - 如何让我的 Twitter Bootstrap 按钮右对齐？

20 回答 20

Related

Reference