我有一个简单的演示在这里:
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>
我有一个无序列表,并为每个列表项我想对左文本,然后一个右对齐按钮。 我曾试图用拉的权利,但这种完全搅乱对齐。 我究竟做错了什么?
我有一个简单的演示在这里:
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
进阶级属性,让自举排列按钮。
对于引导2.3,请参阅: http://getbootstrap.com/2.3.2/components.html#misc > Helper类> .pull右。
自举3,请参阅: https://getbootstrap.com/docs/3.3/css/#helper-classes >辅助类。
自举4,请参阅: https://getbootstrap.com/docs/4.0/utilities/float/#responsive
的pull-right
除去,并用替换命令float-right
或者通常到float-{sm,md,lg,xl}-{left,right,none}
在Twitter的引导3试试类上拉右
class="btn pull-right"
“右拉”级可能不是正确的做法,因为在使用“浮动:权利”,而不是文本对齐。
检查引导3 css文件,我发现在网上457“文本的权利”类该类应该是对齐文本的权利的方式。
一些代码:
<div class="row">
<div class="col-xs-12">
<div class="text-right">
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
更新2018 -引导4.0.0
在pull-right
类现在float-right
在引导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列表,并使用该行的块元素。
是float-right
仍无法正常工作?
请记住, 引导4现在是Flexbox的 ,很多元素都display:flex
,可以防止工作浮动权。 在一些情况下,UTIL类,如align-self-end
或ml-auto
工作,以右对齐是像一个自举4 .row,卡或NaV的Flexbox的容器内的元件。
还记得text-right
仍然有效的内联元素。
自举4右对齐的例子
引导3
使用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; }
容器和已建成填补从引导柱内工作时,添加到接受的答案,我有时也有一个孩子的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>
对不起,回复到旧的已经回答的问题,但我想我会指出,有几个原因,你的jsfiddle不行,万一别人检查出来,不知为什么作为接受的答案中描述的拉正确的类没有按“T那里工作。
<button>
元素代替。 工作小提琴: 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>
(I还添加了一个最小宽度的按钮作为我无法忍受不齐整右对齐的外观的外观,因为不同宽度的按钮:))
使用引导pull-right
帮手,因为它使用并没有为我们工作float: right
,这迫使inline-block
元素成为block
。 而当.btn
s ^变成block
,他们失去了天然的保证金inline-block
是为他们提供为准文本元素。
所以不是我们使用direction: rtl;
父元素,这将导致该元素中的文本从右到左布局,以及使上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>
应用pull-right
类的按钮。 http://getbootstrap.com/css/#helper-classes-floats - >辅助类
此链接将帮助
拉权利被贬值为V3.1.0的。 只是抬起头来。
http://getbootstrap.com/components/#callout-dropdown-pull-right
你可以尝试自定义CSS一边引导CSS来看看是否有任何变化。 尝试
.move-rigth{
display: block;
float: right;
}
如果一切正常,那么你可以尝试操纵你有什么或添加其他格式来此,实现你的愿望。 由于使用的是引导,如果它不为您提供你想要的东西,那么你只是管理这并不意味着。 你与你的代码的工作,所以你命令它做你说的。 干杯!
<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>
我只是用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;
}
现在,你需要.dropdown菜单右添加到现有的.dropdown菜单元素。 拉权不再被支持。 这里更多信息http://getbootstrap.com/components/#btn-dropdowns
您还可以使用空白列给空间左
喜欢
<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演示
从引导V3.3.1以下CSS样式将解决这个问题
.modal-open{
padding-right: 0 !important;
}
注:我试着在上面的帖子和所有地址旧版本的所有建议,并没有提供修复程序newset引导版本。
在引导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>
为引导4 文档
<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>