在Bootstrap 3中将div右对齐

Question

在Bootstrap 3中有没有一种方法可以右对齐一个div？

我知道可以使用offset来实现，但是我想将格式化的div与其容器右对齐，同时在全宽度的移动视图中仍应居中显示。类名“pull-right”不再起作用了。他们忘记替换它了，还是我漏掉了显而易见的东西？

<div class="row">
  <div class="container">
    <div class="col-md-4">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4">
      <!-- The next div has a background color and its own paddings and should be aligned right-->
      <!-- It is now in the right column but aligned left in that column -->
      <div class="yellow_background">right content</div>
    </div>
  </div>
</div>

我知道如何使用CSS完成这个任务，但是能否只使用纯Bootstrap 3实现呢？

- Klaaz

---

向右对齐正在工作中... - Gavin

Answer 1

在Bootstrap 3中，类pull-right仍然存在。请参见此处的'helper classes'。'helper classes'

pull-right是这样定义的：

.pull-right {
  float: right !important;
}

没有更多关于样式和内容的信息，很难说。

当页面宽度大于990像素时（也就是col-md样式生效的时候），它在JSBIN中确实向右拉，因为Bootstrap 3是移动优先的。

Bootstrap 4

请注意，对于Bootstrap 4，.pull-right已被替换为.float-right https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid。

- JasonB

Answer 2

你是说像这样的东西吗：

HTML

<div class="row">
  <div class="container">

    <div class="col-md-4">
      left content
    </div>

    <div class="col-md-4 col-md-offset-4">

      <div class="yellow-background">
        text
        <div class="pull-right">right content</div>  
      </div>

    </div>
  </div>
</div>

CSS

.yellow-background {
  background: blue;
}

.pull-right {
  background: yellow;
}

完整示例可以在Codepen上找到。

- Eric Geurts

---

如果我没错的话，.yellow-background 类应该有黄色背景而不是蓝色。 - Stack Overflow

Answer 3

我觉得您想要将

内的内容向右对齐，而该

已经通过偏移自身向右推进。以下是一些代码和实时样例：
FYI： .pull-right只会将

向右推进，而不会将

中的内容也向右推进。

HTML：

<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>

CSS（层叠样式表）：

.someclass{ /*this class for testing purpose only*/
    border:1px solid blue;
    line-height:2em;
}

.totheright{ /*this will align the text to the right*/
  text-align:right;
}

.yellow_background{
    background-color:yellow;
}

另一种修改方式：

...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...

希望这能解决你的问题。

- xnome

Answer 4

Bootstrap 4+对此的实用类进行了更改。 从文档中：

添加了响应式浮动的.float-{sm,md,lg,xl}-{left,right,none}类，并删除了.pull-left和.pull-right，因为它们与.float-left和.float-right是冗余的。

因此，如果您使用较新版本的Bootstrap，则请使用.float-right（或等效大小，例如.float-lg-right）而不是.pull-right进行右侧对齐。

- Voicu

Answer 5

在你的类中添加offset8，例如：

<div class="offset8">aligns to the right</div>

- preeti

---

请编辑您的答案并通过提供更多细节来提高其质量。 - Elzo Valugi