Twitter引导程序float div右


142

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>


您想浮动文字吗?看看CSStext-align
罗恩·范·德·海登

引导程序中没有构建(标准)方式吗?
贾斯汀

Answers:


85

您的行中有两个span6 div,因此将占据一行所组成的整个12个span。

在第二个span6 div中添加右上角不会对其执行任何操作,因为它已经位于右边。

如果您想让第二个span6 div中的文本向右对齐,则可以简单地向该div中添加一个新类,并为其指定text-align:right值,例如

.myclass {
    text-align: right;
}

更新:

EricFreese指出,在Bootstrap 2.3版本(上周)中,他们添加了可以使用的文本对齐实用程序类:

  • .text-left
  • .text-center
  • .text-right

http://twitter.github.com/bootstrap/base-css.html#typography


5
看起来他们添加的实用程序类在对齐文本2.3.text-left.text-center,和.text-right
埃里克·弗里斯

1
@EricFreese-您是对的-没有注意到该更新-我已经更新了答案。
比利·护城河

这不应该是公认的答案。有一个内置的引导程序类,称为pull-right(@Amit的贷方);IMO,使用内置的Bootstrap类更干净... OP在他的问题中要求这样做
Kolob Canyon

107

pull-right推荐将div浮动到右侧是一种正确的方法,我觉得您做的正确,也许只是您需要使用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>

unfrotunately pull-rightgetbootstrap.com/components/#dropdowns-alignment:与3.1版本弃用
ılǝ

12
@ılǝ“ ..我们在下拉菜单中不建议使用.pull-right 。” 这不适用于其他向右使用的用法。
user2864740 2015年

78

bootstrap 3具有用于在div中对齐文本的类

<div class="text-right">

将在右侧对齐文本

<div class="pull-right">

会将所有内容拉到右边,而不仅仅是文本


text-righttext-left并且text-center效果完美。并相应地将文本与容器对齐。
Anish Nair

谢谢@BojanKogoj,确实不赞成在v 3.1中使用下拉菜单进行下拉菜单:getbootstrap.com/components/#dropdowns-alignment
2016年

27

这可以解决问题,而无需添加内联样式

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

答案是将另一个嵌套<div>在“ pull-right”类中。将这两个类结合起来是行不通的。


1
这应该是正确的答案。Bootstrap的要点是避免必须直接处理样式。
克里斯汀·怀特

18
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

这为我工作。

编辑:您的摘要示例:

@import url('https://unpkg.com/bootstrap@3.3.7/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>


3

您可以分配类名,例如text-center,left或right。文本将与这些类名相对应。您无需单独添加额外的类名。这些类是在BootStrap 3和Bootstrap 4中构建的。

引导程序3

v3文字对齐文件

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

引导程序4

v4文字对齐文件

<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.