Question

我怎么可能创建四个高度和宽度为百分比的网格块，以便它可以在移动设备上自动调整大小，下面是我正在谈论的图像。

我的意思是 - 4个网格块，左边一个大块，右边顶部一个，剩下的两个juts位于第二个网格块之下，相信我这是最好的解释这个，我会这么多爱和欣赏你的帮助。

<div class="the-home-big-grid">
  <div class="the-real-big-grid">
    <div class="first-big-guy">
      <img src="assets/img/7.jpg" class="img-responsive" />
      <div class="biggrid-overlay">
        <div class="before-big-grid-overlay-content">
        </div>
        <p class="the-big-grid-overlay-cat">
          Web Designing
        </p>
        <h2 class="biggrid-the-featured-title">
    <a href="#">The Diffrent typs of Desk there is</a>
     </h2>
        <div class="the-big-grid-featred-post-data">
          <img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By <a href="#">Neon Emmanuel</a>  <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span> 
        </div>
      </div>
    </div>
  </div>
  <div class="secound-big-guy">
    <img src="assets/img/2.jpg" class="img-responsive" />
    <div class="secound-biggrid-overlay">
      <div class="before-secound-grid-overlay-content">
      </div>
      <p class="the-secound-grid-overlay-cat">
        Web Designing
      </p>
      <h2 class="secound-the-featured-title">
    <a href="#">The Diffrent typs of Desk there is</a>
    </h2>
      <div class="the-secound-grid-featred-post-data">
        <img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By <a href="#">Neon Emmanuel</a>  <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span> 
      </div>

    </div>
  </div>
  <div class="third-big-guy">
    <img src="assets/img/1.jpg" class="img-responsive" />
    <div class="third-biggrid-overlay">
      <div class="before-third-grid-overlay-content">
      </div>
      <p class="the-third-grid-overlay-cat">
        Web Designing
      </p>
      <h2 class="third-the-featured-title">
    <a href="#">The Diffrent typs of Desk there is</a>
    </h2>
      <div class="the-third-grid-featred-post-data">
        <img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By <a href="#">Neon Emmanuel</a>  <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span> 
      </div>

    </div>
  </div>
</div>
</div>
</div>

图像 Below is the image of what i meain

Answer 1

这里的Bootply：http://www.bootply.com/JlOEZaBkNs

<div class="row">
  <div class="col-xs-6">A
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-12">B</div>
    </div>
    <div class="row">
      <div class="col-xs-6">C</div>
      <div class="col-xs-6">D</div>
    </div>
  </div>
</div>

如何在bootstarp中创建全宽度的4个网格块

1 个答案: