Twitter bootstrap 浮动 div 右

Posted 2023-03-05

【中文标题】Twitter bootstrap 浮动 div 右

【英文标题】：Twitter bootstrap float div right

【发布时间】：2013-01-26 09:18:24

【问题描述】：

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

在引导程序中是否没有内置（标准）方式？

***.com/questions/12829608/…

【参考方案1】：

您可以指定类名，如 text-center、left 或 right。文本将与这些类名相应地对齐。您不需要单独制作额外的类名。这些类是在 BootStrap 3 和 bootstrap 4 中构建的。

引导程序 3

v3 Text Alignment Docs

<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 Text Alignment Docs

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

【参考方案2】：

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

这对我有用。

编辑：你的 sn-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】：

您的行中有两个 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

【讨论】：

看起来他们添加了用于对齐 2.3 中的文本的实用程序类：.text-left、.text-center 和 .text-right

@EricFreese - 你是对的 - 没有注意到更新 - 我已经更新了我的答案。

这不应该是公认的答案。有一个名为pull-right 的内置引导类（归功于@Amit）； IMO，使用内置的 Bootstrap 类更清洁......并且 OP 在他的问题中提出了这个要求

【参考方案4】：

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

【讨论】：

不幸的是，pull-right 在 3.1 版中已被弃用：getbootstrap.com/components/#dropdowns-alignment

@ılǝ "..we've deprecated .pull-right on dropdown menus."这不适用于其他 pull-right 用法。

【参考方案5】：

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

<div class="text-right">

将右边的文字对齐

<div class="pull-right">

将所有内容拉到右侧，而不仅仅是文本

【讨论】：

text-right、text-left 和 text-center 完美运行。并相应地将文本与容器对齐。

感谢@BojanKogoj，确实在 v 3.1 中不推荐使用下拉菜单：getbootstrap.com/components/#dropdowns-alignment

【参考方案6】：

这样就可以了，无需添加内联样式

<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 的重点是避免直接处理样式。