Question

为外卖餐厅创建首页。

我遇到的问题是由于双倍高度元素，最后一行不适合内部。

代码

<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个元素与其余元素放在同一行？

Answer 1

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>

Answer 2

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

＆＃13;

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

＆＃13;

codepen live example：http://codepen.io/narxx/pen/vGbzvR

Bootstrap使用右对齐行嵌套

2 个答案: