Bootstrap 垂直对齐而不破坏网格

Question

我一直在尝试所有我发现的垂直对齐网格的不同选项。因为我有 none 的布局。

这是我必须做的：对于 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

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

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

Bootstrap 垂直对齐而不破坏网格

Bootstrap vertical aligned without breaking the grid

html

css

vertical-alignment

twitter-bootstrap