具有右对齐行的引导嵌套答案

【问题标题】：Bootstrap Nesting with right alignment rows具有右对齐行的引导嵌套
【发布时间】：2016-09-04 03:44:45
【问题描述】：

为外卖餐厅创建首页。

我遇到的问题是由于双高元素，最后一行无法放入其中。

代码

<div class="row">
  <a class="col-md-3 img-box img-hover" href="#">
    <img class="img-responsive" src="http://placehold.it/480x900">
  </a>
  <div class="col-md-9">
    <div class="row">
      <a class="col-md-4 img-box img-hover" href="#">
        <img class="img-responsive" src="http://placehold.it/480x600">
      </a>
      <div class="col-md-8">
        <div class="row">
          <a class="col-md-6 img-box img-hover" href="#">
            <img class="img-responsive" src="http://placehold.it/480x300">
          </a>
          <a class="col-md-6 img-box img-hover" href="#">
            <img class="img-responsive" src="http://placehold.it/480x300">
          </a>
        </div>
        <div class="row">
          <a class="col-md-6 img-box img-hover" href="#">
            <img class="img-responsive" src="http://placehold.it/480x300">
          </a>
          <a class="col-md-6 img-box img-hover" href="#">
            <img class="img-responsive" src="http://placehold.it/480x600">
          </a>
        </div>
      </div>
    </div>
    <div class="row">
      <a class="col-md-4 img-box img-hover" href="#">
        <img class="img-responsive" src="http://placehold.it/480x300">
      </a>
      <a class="col-md-4 img-box img-hover" href="#">
        <img class="img-responsive" src="http://placehold.it/480x300">
      </a>

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

问题截图

如何将最后 2 个元素与其余元素放在同一行？

【问题讨论】：

标签： html css twitter-bootstrap nested alignment

【解决方案1】：

您需要以不同方式设置行。将左侧的两行视为一组，将右侧的双高项目视为第二组。它们都在同一行。

<div class="col-md-9">
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x600">
        </a>
      </div>
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
      </div>
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <a class="img-box img-hover" href="#">
      <img class="img-responsive" src="http://placehold.it/480x300">
    </a>
    <a class="img-box img-hover" href="#">
      <img class="img-responsive" src="http://placehold.it/480x600">
    </a>
  </div>
</div>

codepen 实例：http://codepen.io/narxx/pen/vGbzvR

【讨论】：

有一分钟我认为这是解决方案。问题是第一个块是 480x900（3 个块高），这使您的解决方案产生了一个新问题。 :(
是的，很抱歉。在重写你的整个东西时一定错过了:) 我还有一个问题，右两列只有 600 像素高度，因为左边两列有 900 像素高度。你想在哪里有空闲空间？在右两列的底部？

【解决方案2】：

http://www.bootply.com/KSRUmHINHw

您需要使用嵌套网格行。所以第二列实际上是由两行组成的。

<div class="container">
<div class="row">
  <div class="col-md-3"><img src="http://placehold.it/100x200"></div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
      <div class="row">
      <div class="col-md-12"><img src="http://placehold.it/100x25"></div>
    </div>
    </div>
   <div class="col-md-3">
    <div class="row">
     <div class="col-md-12"><img src="http://placehold.it/100x175"></div></div>
      <div class="row">
      <div class="col-md-12"><img src="http://placehold.it/100x25"></div>
    </div>
    </div>
  <div class="col-md-3"><img src="http://placehold.it/100x200"></div>
  </div>
</div>

【讨论】：