Twitter bootstrap浮动div权利

Question

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>

Answer 1

向右浮动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>

Answer 2

你的行中有两个span6 div,因此将占用一行组成的整个12个跨度.

向第二个span6 div添加pull-right不会对它做任何事情,因为它已经位于右侧.

如果你的意思是你想让第二个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

Answer 3

bootstrap 3有一个类来对齐div中的文本

<div class="text-right">

将对齐右侧的文本

<div class="pull-right">

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

Answer 4

这样做无需添加内联样式

<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>用"拉右"类嵌套另一个.将这两个类组合起来是行不通的.

Answer 5

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