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

Posted 2023-02-16

【中文标题】如何让我的 Twitter Bootstrap 按钮右对齐？

【英文标题】：How can I get my Twitter Bootstrap buttons to right align?

【发布时间】：2013-03-04 23:32:52

【问题描述】：

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

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

【问题讨论】：

为什么这个问题用twitter-bootstrap-3和twitter-bootstrap-2以及twitter-bootstrap标记？

因为它与自 3/2013 以来的所有版本相关

【参考方案1】：

在类属性中插入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

【讨论】：

我不明白这个答案。在问题中，示例代码已经在使用pull-right。

@guival 我也在想同样的事情。 ***.com/a/26546770/470749 意味着使用 button 代替 input 会有所作为。

【参考方案2】：

在 twitter bootstrap 3 中尝试类 pull-right

class="btn pull-right"

【讨论】：

不再，从 v 3.1 起已弃用：getbootstrap.com/components/#dropdowns-alignment

+1 用于突出显示更改。但该折旧仅适用于已被 .dropdown-menu-right 取代的下拉菜单。它并没有作为一个整体被弃用。

你是对的，文档说we've deprecated .pull-right on dropdown menus

我不得不在外部 btn-group div 中使用 pull-right：

pull-right 使用float: right，从而将垂直内容折叠在一起。像这样用text-right DIV 包裹按钮 -<div class="text-right">button...</div>

【参考方案3】：

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

【讨论】：

我认为这比 pull-right 更好，因为它可以防止垂直内容相互重叠，并且避免为了解决这个问题而添加更多标记。

谢谢。 “向右拉”的问题在于它会删除按钮的任何边距。这会保持边距，但会将元素向右移动。完美！

为什么 text-right 必须在包含此按钮的 div 中，而不仅仅是按钮中的 class="btn btn-default text-right"？

【参考方案4】：

2019 年更新 - Bootstrap 4.0.0

pull-right 类现在在 Bootstrap 4 中是 float-right...

    <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 工作。在某些情况下，align-self-end 或 ml-auto 等实用程序类可用于右对齐 flexbox 容器（如 Bootstrap 4 .row、Card 或 Nav）内的元素。

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

Bootstrap 4 align right examples

---

引导程序 3

使用pull-right 类。

【讨论】：

他们为我工作，但您不需要依赖链接。阅读答案，了解如何右对齐。

【参考方案5】：

使用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; 

【参考方案6】：

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

【参考方案7】：

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

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>

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

【参考方案8】：

使用 Bootstrap pull-right 助手对我们不起作用，因为它使用 float: right，即 forces inline-block elements to become 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>

【参考方案9】：

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

【参考方案10】：

对于 Bootstrap 5：

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

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

【参考方案11】：

从 v3.1.0 开始，Pull right 已贬值。 请注意。

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

【讨论】：

pull-right 在 dropdown-menu 上已弃用。它仍然可以用于其他组件。

【参考方案12】：

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

此链接会有所帮助

【参考方案13】：

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

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

【参考方案14】：

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

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

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

【讨论】：

不需要自定义 css，因为其他答案显示所需的一切都包含在引导程序中

@chrisweb 如果您有一些其他插件共享您不知道的相同 CSS 类并且存在冲突问题，您会怎么做？坐下来观看而不是创建自定义 CSS 并继续前进？ OP 从未指定是否添加了可能共享相同 css 类的任何其他插件。

【参考方案15】：

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

喜欢

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

【参考方案16】：

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

【讨论】：

对我来说，这会将两个列表项放在一行

【参考方案17】：

Bootstrap V3.3.1以下的 CSS 样式将解决此问题

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

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

【参考方案18】：

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

【讨论】：

如果您可以在代码中包含解释，它将有助于原始发布者。

【参考方案19】：

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

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

【参考方案20】：

对于引导程序 4 documentation

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

【讨论】：

这与右对齐和按钮有什么关系？

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?