如何引導創建複雜的電網和響應

Question

我這段代碼創建以下電網， 複雜的電網引導：

但當調整瀏覽器窗口，面板佈局不若true.excuse我我的英語語言不好。

.mm{ 
 
    border-radius:5px; 
 
    border:2px solid black; 
 
    color:black; 
 
    font:bold 50px b yekan; 
 
    text-align:center; 
 
}

<div class="row"> 
 
      <div class="col-md-9 col-sm-9 col-xs-12 pad "><div class="mm" style="height:150px;background-color:#c78221">1</div></div> 
 
      <div class="col-md-3 col-sm-3 col-xs-12 pad"><div class="mm" style="height:300px;background-color:#ffd800">2</div></div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class=" col-md-2 col-sm-3 col-xs-12 pad" style="top:-150px"><div class="mm" style=" height:300px;background-color:#9158ee">3</div></div> 
 
      <div class="col-md-7 col-sm-6 col-xs-12 pad" style="top:-150px"><div class=" mm" style="height:150px;background-color:#ff006e">4</div></div> 
 
      <div class="col-md-3"></div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-2 col-sm-3 pad" style="top:-300px"></div> 
 
      <div class="col-md-2 col-sm-3 pad" style="top:-300px"><div class="mm" style="height:150px;background-color:#4cff00">5</div></div> 
 
      <div class="col-md-4 pad" style="top:-300px"><div class="mm" style="height:300px;background-color:#1f9cdc">6</div></div> 
 
      <div class="col-md-4 pad" style="top:-300px"><div class="mm " style="height:300px;background-color:#ff00dc">7</div></div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-4 pad" style="top:-450px"><div class="mm" style="height:150px;background-color:#1a8d43">8</div></div> 
 
     </div>

Answer 1

首先看到官方的引導頁面，瞭解系統如何工作網格。 Grid system here

我創建了一個演示爲大家講解bootply

Bootply demo

希望這有助於