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

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


当前回答

在推特引导3尝试类右拉

class="btn pull-right"

其他回答

在推特引导3尝试类右拉

class="btn pull-right"

在class属性中插入pull-right,让bootstrap来排列按钮。

对于Bootstrap 2.3,请参见:http://getbootstrap.com/2.3.2/components.html#misc >帮助类> .pull-right。


关于引导3,请参见:https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper类。


关于Bootstrap 4,请参见:https://getbootstrap.com/docs/4.0/utilities/float/#responsive

右拉命令被移除并替换为右浮动命令或一般的float-{sm,md,lg,xl}-{左,右,none}


Boostrap 5参见:https://getbootstrap.com/docs/5.0/utilities/float/

最接近的解决方案是浮动端。

你可以尝试一个自定义CSS除了引导CSS看看是否有任何变化。试一试

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

如果它起作用了,那么你可以尝试操纵你所拥有的或添加其他格式,从而实现你想要的。因为你在使用引导并不意味着如果它不能提供你想要的东西,那么你就可以管理它。你正在使用你的代码,所以你命令它按照你说的去做。 干杯!

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

使用按钮标记代替输入,并使用右拉类。

右拉类完全混淆了你的两个按钮,但你可以通过在右侧定义自定义边距来解决这个问题。

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