自舉網格更改列的大小

我正在嘗試找到調整網格列大小的方法。這是ahrd解釋所以我已經基本上想要實現的圖片當我調整瀏覽器窗口的大小，網格更改，以便列中的最後一個元素被移動到新的行。這可以通過引導程序或任何其他技術來完成嗎？自舉網格更改列的大小

一張圖片勝過千言萬語

2017-01-19 Energizem

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

我不知道要搜索什麼tbh，我最好的猜測是bootstrap，但是我看到的所有bootstrap示例都無法做到這一點... – Energizem

引導具有被內置類你可以與他們做到這一點。對於上面顯示的圖片，請嘗試下面的代碼，並且不要忘記包含bootstrap css。你可以從getBootstrap網站獲得。我假設連續有6個盒子。你甚至可以在css中用@media查詢的幫助來處理。嘗試探索喜歡iPad平板電腦和手機等設備上的不同的屏幕寬度@media查詢行爲和不同類型的

  <html lang="en"> 
     <head> 
      <title>Bootstrap Example</title> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     </head> 
     <body> 
     <div class="row"><!-- row is a built in class of bootstrap and each row has 12 column --> 
       <!-- give each column a width of 2 columns --> 
       <!-- col-lg-* is for large screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;> 
         Box 1 
       </div> 
       <!-- col-md-* is for medium size screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 2 
       </div> 
       <!-- col-sm-* is for small screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 3 
       </div> 
       <!-- col-xs-* is for extra small screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 4 
       </div> 
       <!-- col-xl-* is for extra large screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 5 
       </div> 

       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 6 
       </div> 
     </div> 
     </body> 
     </html>