首页 文章

在Bootstrap 3中右对齐div

提问于
浏览 次
40

在Bootstrap 3中是否有一种方法可以正确对齐div？

我知道偏移的可能性，但我想将格式化的div对齐到其容器的右侧，而它应该在全宽移动视图中居中 . “拉右”这个班不再适用了 . 他们忘了更换它还是我错过了一些明显的东西？

<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中完成吗？

html css twitter-bootstrap-3

4 回答

  • -3

    class 右拉仍在Bootstrap 3中见'helper classes' here

    pull-right定义为

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

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

    当页面宽度超过990px时，它肯定会在这个JSBIN中正确 - 这是当col-md样式开始时，Bootstrap 3首先是移动的，而且全部都是 .

    回复于
  • 42

    你的意思是这样的：

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

    回复于
  • 53

    我认为你试图将内容与div中的右边对齐，带偏移的div已经将自己推向右边，这里有一些代码和LIVE sample：
    仅供参考： .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>
  
    image also align-right
    
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...

    希望它能解决你的问题

    回复于
  • 3

    将 offset8 添加到您的 class ，例如：

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

相关问题