twitter-bootstrap - 如何才能让我Twitter Bootstrap按钮右对齐?

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

http://jsfiddle.net/HdeZ3/1/


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

我有一个无序列表,对于每个列表项,我希望左边有文本,然后是右对齐按钮。我试图使用pull-right ,但是,这完全弄乱了对齐。我究竟做错了什么?

时间:

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

使用Bootstrap pull-right helper不适用于我们,因为它使用float: right强制inline-block元素成为block ,当.btn s成为block时,它们将失去inline-block为自然文本元素提供的自然边距。

您可以使用以下内容来防止子元素被放置到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>

添加到已接受的答案,当在从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>

你能用Bootstrap CSS来试试定制CSS来看看是否有变化。 尝试


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

如果它工作,那么你可以尝试操纵你拥有的或添加其他格式,并实现你想要的。因为使用Bootstrap并不意味着它不提供你想要的东西,那么你只需要管理它,干杯!


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

我刚用了li的layout..apply样式。 。

或者


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

...