如何使用bootstrap來做這個圖像？

Question

如何使用bootstrap像這樣的圖像？

這是我的代碼這段代碼有什麼問題請幫幫我。

<div class="row"> 
    <div class="img-5"> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/1.jpg" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/2.jpg" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/3.jpg" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="hn-img-1"> 
       img src="img/5.jpg" alt=""> 
       </div> 
      </div> 
      <div class="col-md-4"> 
      <div class="hn-img-1"> 
       <img src="img/4.jpg" alt="" class="mt-top"> 
      </div> 
      </div> 
    </div> 
</div> 

和結果是這樣的，

這是我的代碼的結果。

Answer 1

您可以使用嵌套行來創建所需的結構。這是一個示例代碼，可以引導您進行所需的設計。

<div class="row"> 
    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">2</div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">4</div> 
      </div> 

     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="well">1 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">2</div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="well">4</div> 
      </div> 

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

JSFIDDLE

Answer 2

下你應該刪除，因爲在ROW你應該只使用你想在網格什麼用像類COL-SM-*或COL-MD-* 你也有喲如果要在網格中的當前div之前留出空白空間，請使用類似.col-md-offset- *的類。

Answer 3

Bootstrap將屏幕分成12列，你sholud只有3列md-4 y一行。在第一列中放置兩張圖像，中間一列放大圖像，最後一列放置兩張剩餘的圖像。

Answer 4

引導具有12列的網格系統。所以你應該劃分你的網格，使網格的總和達到12.

錯誤：你正在使用5格col-md-4，每格4格。這意味着你的網格總數達到了20.但是，它應該是12.在某些情況下，大於12的網格總和可能會正常工作（使用col-sm-*）。但強烈建議使用12個網格系統。

所以，你應該做的是：

1. ，而不是使用5 col-md-4你應該只使用3 col-md-4（格= 12的總和）。
2. 您應該在第一個div（左div）中放置2個圖像，在第二個div（中央div）中放置1個圖像，其餘2個圖像放在第三個div（右div）中。

這應該可以做到。這是JSFiddle demo。 （因爲md代表中等設備，我們與列div元素通信的是當可用屏幕空間等於或大於「中等設備」（992px及以上）時，修改這些元素的寬度以匹配列編號爲md class name請確保JSFiddle中的輸出窗口具有最大寬度以查看結果，否則所有圖像將堆疊在另一個之下）

希望它有幫助，請讓我知道如果您有問題。

Answer 5

看看這個圖片有關於網格的基本知識。使用網格佈局根據您的需要分配頁面。