Question

我有一个img in boostrap，我希望它在右边显示，并在左边显示4个对象，每行有两个对象，这是从网格中的4列

我的HTML

   <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12 img-container">
          <div class="product first wow zoomInDown "
           data-wow-delay="0.3s" data-wow-duration="2s">
              <img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" >
              <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
              <p>Energy</p>
          </div> <!-- end of product-->
      </div> <!-- end of bootstrap columns-->

        <div class="col-md-4 col-sm-6 col-xs-12 img-container">
          <div class="product second wow zoomInDown "
           data-wow-delay="0.3s" data-wow-duration="2s">
              <img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
              <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
              <p>Phyto</p>
          </div> <!-- end of product-->
      </div> <!-- end of bootstrap columns-->

      <div class="banner">
        <img src="http://placehold.it/300x450">

      </div>




        <div class="clearfix"></div>

      <div class="col-md-4   col-sm-6 col-xs-12 img-container">
          <div class="product second wow zoomInDown "
           data-wow-delay="0.3s" data-wow-duration="2s">
              <img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
              <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
              <p>Phyto</p>
          </div> <!-- end of product-->
      </div> <!-- end of bootstrap columns-->

       <div class="col-md-4   col-sm-6 col-xs-12 img-container">
          <div class="product second wow zoomInDown "
           data-wow-delay="0.3s" data-wow-duration="2s">
              <img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
              <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
              <p>Phyto</p>
          </div> <!-- end of product-->
      </div> <!-- end of bootstrap columns-->






   </div> <!-- end of row-->

我的CSS

.product{   overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;}
.product p {position: absolute; top: 10%; left:200%;  color: white;
 z-index: 2000;  font-size: 20px; opacity:0; transition:all 0.5s;}

 .product h6 {position: absolute; top: 40%; left:-200%;   color: white;
 z-index: 3000;  font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px;  
 transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); }

这是显示的结果 http://i.imgur.com/2PhECdx.jpg

Answer 1

我已修改您的代码以生成两列，第一列包含两行，其中包含两列。

 <div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>

    <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>
</div>

<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>

   <div class="col-md-6 col-sm-6 col-xs-12 img-container">

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

<div class="col-md-4 col-sm-6 col-xs-12 img-container">

</div>

</div>

检查一下： http://jsfiddle.net/h68hzfnc/

如何在bootstrap中修复此网格系统问题

1 个答案: