我在这里有一个简单的演示:
<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>
< /德>
<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>
一种方法是将这种样式应用于列表项,以保持它们的内联
or
<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;
}
更新2019 -引导4.0.0
在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列表,而使用块元素作为行。
右浮动仍然不起作用吗?
请记住,Bootstrap 4现在是flexbox,许多元素是display:flex,这可以阻止右浮动的工作。在某些情况下,像align-self-end或ml-auto这样的util类工作于向右对齐flexbox容器中的元素,如Bootstrap 4 .row, Card或Nav。
还要记住,右文本仍然适用于内联元素。
引导4对齐右示例
引导3
使用右拉类。