Bootstrap 向右浮动 div

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>

397197 次浏览

在您的行中有两个 span 6 div,因此它将占用一行组成的整个12个 span。

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

如果您的意思是希望将第二个 span 6 div 中的文本向右对齐,那么可以向该 div 添加一个新类,并给它赋予 text-along: right value 例如。

.myclass {
text-align: right;
}

更新:

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

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

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

把一个 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>

这样就可以解决这个问题,而不需要添加内联样式

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

答案是用“ pull-right”类嵌套另一个 <div>

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

<div class="text-right">

将文本右对齐

<div class="pull-right">

将所有的内容都拉到右边,不仅仅是文字

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

这对我有用。

Edit: 带有代码片段的示例:

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

您可以分配类名,比如文本中心,左边或右边。文本将相应地与这些类名对齐。您不需要单独创建额外的类名。这些类是在 BootStrap3和 bootstrap4中构建的。

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

试试这样,希望这就是你想要的。

<div class="float-end">Div floated to right</div>