Html Twitter引导程序浮动div右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14809313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap float div right
提问by Justin
What is the proper way in bootstrapto float a div to the right? I thought pull-rightwas the recommend way, but it is not working.
bootstrap将 div 向右浮动的正确方法是什么？我认为pull-right是推荐的方式，但它不起作用。
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}<div class="container">
<div class="row-fluid">
<div class="span6">
<p>Text left</p>
</div>
<div class="span6 pull-right">
<p>text right</p>
</div>
</div>
</div>采纳答案by Billy Moat
You have two span6 divs within your row so that will take up the whole 12 spans that a row is made up of.
您的行中有两个 span6 div，因此将占据一行构成的全部 12 个跨度。
Adding pull-right to the second span6 div isn't going to do anything to it as it's already sitting to the right.
向第二个 span6 div 添加 pull-right 不会对它做任何事情，因为它已经坐在右边。
If you mean you want to have the text in the second span6 div aligned to the right then simple add a new class to that div and give it the text-align: right value e.g.
如果你的意思是你想让第二个 span6 div 中的文本向右对齐，那么简单地向那个 div 添加一个新类并给它 text-align: right 值，例如
.myclass {
text-align: right;
}
UPDATE:
更新：
EricFreese pointed out that in the 2.3 release of Bootstrap (last week) they've added text-align utility classes that you can use:
EricFreese 指出，在 Bootstrap 的 2.3 版本（上周）中，他们添加了您可以使用的 text-align 实用程序类：
.text-left.text-center.text-right
.text-left.text-center.text-right
http://twitter.github.com/bootstrap/base-css.html#typography
http://twitter.github.com/bootstrap/base-css.html#typography
回答by Amit
To float a div to the right pull-rightis the recommend way, I feel you are doing things right may be you only need to use text-align:right;
将 div 向右浮动pull-right是推荐的方式，我觉得你做对了可能你只需要使用text-align:right;
<div class="container">
<div class="row-fluid">
<div class="span6">
<p>Text left</p>
</div>
<div class="span6 pull-right" style="text-align:right">
<p>text right</p>
</div>
</div>
</div>
</div>
回答by ishimwe
bootstrap 3 has a class to align the text within a div
bootstrap 3 有一个类来对齐 div 中的文本
<div class="text-right">
will align the text on the right
将对齐右侧的文本
<div class="pull-right">
will pull to the right all the content not only the text
将把所有内容都拉到右边，而不仅仅是文本
回答by Bern
This does the trick, without the need to add an inline style
这可以解决问题，无需添加内联样式
<div class="row-fluid">
<div class="span6">
<p>text left</p>
</div>
<div class="span6">
<div class="pull-right">
<p>text right</p>
</div>
</div>
</div>
The answer is in nesting another <div>with the "pull-right" class. Combining the two classes won't work.
答案是在<div>“pull-right”类中嵌套另一个。结合这两个类是行不通的。
回答by Kévin Berthommier
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>
This work for me.
这对我有用。
edit: An example with your snippet:
编辑：您的代码段的示例：
@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.css');
.container {
margin-top: 10px;
}<div class="container">
<div class="row-fluid">
<div class="span6 pull-left">
<p>Text left</p>
</div>
<div class="span6 text-right">
<p>text right</p>
</div>
</div>
</div>回答by Faisal
You can assign the class name like text-center, left or right. The text will align accordingly to these class name. You don't need to make extra class name separately. These classes are built in BootStrap 3 and bootstrap 4.
您可以指定类名称，例如 text-center、left 或 right。文本将相应地与这些类名对齐。您不需要单独制作额外的类名。这些类是在 BootStrap 3 和 bootstrap 4 中构建的。
Bootstrap 3
引导程序 3
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Bootstrap 4
引导程序 4
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
