2016-07-22 83 views
-1

enter image description here定製引導電網


我需要使用引導,就像我有uploaded.Please幫我的圖片設計網格。

+0

去這個網站,很容易設計爲電腦,手機等http://shoelace.io/ –

回答

0

我想沿着

<div class="col-sm-4"> 
    <div class="content-here"> 
     <img src="img1.jpg" /> 
    </div> 
</div> 
<div class="col-sm-8"> 
    <div class="boxes"> 
     Box 1 
    </div> 
    <div class="boxes"> 
     Box 2 
    </div> 
    <div class="boxes"> 
     Box 3 
    </div> 
    <div class="boxes"> 
     Box 4 
    </div> 
</div> 

CSS東西線

.content-here { height: 400px; } 
.boxes { float:left; width:50%; height:200px; } 
0

的網格系統,代碼可能是這樣的:

<div class="row"> 
     <div class="col-sm-4"> 
      <img src="example.jpg"> 
     </div> 
     <div class="col-sm-4"> 
      <div class="col-sm-12"> 
       <img src="example.jpg"> 
      </div> 
      <div class="col-sm-12"> 
       <img src="example.jpg"> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="col-sm-12"> 
       <img src="example.jpg"> 
      </div> 
      <div class="col-sm-12"> 
       <img src="example.jpg"> 
      </div> 
     </div> 
    </div> 

之後,你可以指定寬度和每個圖像的高度。如果您希望圖像佔據全部寬度(意味着獲取列的所有空間),則可以設置width:100%