Question

我一直在尝试找到垂直对齐网格的所有不同选项。由于布局我没有任何工作。

这就是我要做的事情：对于COL-MD和COL-LG，布局应该是：

DIV1-IMG     DIV2-TEXT
DIV3-TEXT    DIV4-IMG

在这种情况下，DIV-TEXT必须垂直对齐。

对于COL-SM及以下，布局应为：

DIV1-IMG
DIV2-TEXT
DIV4-IMG (if it is complicated, we can stick to first show DIV3-TEXT and then DIV-4-IMG)
DIV3-TEXT

问题在于，如果我将div设置为display：table及其变体，则网格会断开，并且不会调整为col-xs。

我在这里设置了示例，以防您看到我想要完成的任务：http://www.bootply.com/nCIExg8DkM

关于如何在不破坏网格的情况下垂直对齐文本的任何想法？谢谢！

Answer 1

使用media queries缩小广告的覆盖范围：@media (min-width: 992px) {}。
将.col-md-push-6和.col-md-pull-6修饰符类用于change the order of your columns。
简化课程：
- col-xs-12 col-lg-6 col-md-6等于col-md-6。
- col-lg-offset-2 col-lg-8 col-md-offset-1 col-md-10 col-xs-offset-1 col-xs-10等于col-lg-offset-2 col-lg-8 col-xs-offset-1 col-xs-10。
使用特殊的有用课程：
- The .img-responsive class很好地将图像缩放到父元素。
- The .center-block class通过保证金对齐块。

检查结果：http://www.bootply.com/WEf5cQlDog

＆＃13;

@media (min-width: 992px) {
  .vertical-middle > div {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-offset-1 col-xs-10 col-lg-offset-2 col-lg-8">
      <div class="row vertical-middle">
        <div class="col-md-6">
          <img src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" class="center-block img-responsive">
        </div>
        <div class="col-md-6 text-center">
          <h2>Title 1</h2>                          
          <p>Text to be centered</p>
        </div>
      </div>
      <div class="row vertical-middle top-buffer">
        <div class="col-md-6 col-md-push-6">
          <img src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" class="center-block img-responsive">
        </div>
        <div class="col-md-6 col-md-pull-6 text-center">
          <h2>Title 2</h2>
          <p>Text to be centered</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Bootstrap垂直对齐而不会破坏网格

1 个答案: