50

Bootstrap 3中有没有办法右对齐div？

我知道偏移的可能性，但我想将格式化的 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>

Shure 我知道如何在 CSS 中做到这一点，但它可以在纯 bootstrap 3 中完成吗？

4

5 回答 5

59

Bootstrap 3 中仍然存在类 pull-right 在这里查看“帮助类”

pull-right 定义为

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

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

当页面宽度超过 990像素时，它肯定会在这个JSBIN中正确拉动——这就是 col-md 样式启动的时候，Bootstrap 3 首先是移动设备。

引导程序 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，基于%20on%20the%20Bootstrap%20Grid。

于 2013-11-03T22:23:33.457 回答
47

你的意思是这样的：

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上找到。

于 2013-11-03T22:22:01.643 回答
6

我认为您尝试将内容与 div 内的右侧对齐，具有偏移量的 div 已经将自身推到右侧，这里有一些代码和LIVE 示例：
仅供参考：.pull-right仅将 div 推到右侧，而不是 div 内的内容.

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

希望它能解决你的问题

于 2013-11-05T12:36:37.563 回答
1

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

于 2019-07-23T16:34:28.697 回答
-4

添加offset8到您的班级，例如：

<div class="offset8">aligns to the right</div>
于 2016-04-06T21:51:03.917 回答