我在这里有一个简单的演示:
<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>
< /德>
很抱歉回答一个已经回答过的老问题,但我想我应该指出你的jsfiddle不能工作的几个原因,以防其他人检查它并想知道为什么在接受的答案中描述的拉右类在那里不能工作。
the url to the bootstrap.css file is invalid. (perhaps it worked when you asked the question).
you should add the attribute: type="button" to your input element, or it won't be rendered as a button - it will be rendered as an input box. Better yet, use the <button> element instead.
Additionally, because pull-right uses floats, you will get some staggering of the button layout because each LI does not have enough height to accommodate the height of the button. Adding some line-height or min-height css to the LI would address that.
工作提琴: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>
(我还添加了一个最小宽度的按钮,因为我不能忍受一个粗糙的右对齐的按钮,因为不同的宽度:))
“右拉”类可能不是正确的方式,因为它使用“float: right”而不是文本对齐。
检查引导3 css文件,我发现“文本权利”类在第457行。这个类应该是将文本向右对齐的正确方式。
一些代码:
对于Bootstrap 3和4
<div class="row">
<div class="col-xs-12">
<div class="text-right">
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
自举5
<div class="row">
<div class="col">
<div class="text-end">
<button type="button" class="btn btn-secondary">Default</button>
</div>
</div>
</div>