如何使用bootstrap創建以下響應佈局？

計算機視圖

平板縱向視圖

手機縱向視圖

目前我有這下面的代碼，其中「家庭的內容」部分將生成的項目＃1項＃X：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css"> 
    <link rel="stylesheet" href="../_lib/normalize.css/normalize.css"> 
    <link rel="stylesheet" href="index.css"> 
    <script src="../_lib/jquery/jquery.min.js"></script> 
    <script src="../_lib/jquery/jquery.fittext.js"></script> 
    <script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script src="index.js"></script> 
    <title></title> 
</head> 
<body> 
<script> 
    init(); 
</script> 
<div class="home-bg"></div> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="home-noti"> 
       <div class="news-noti"> 
        <div class="news-panel panel"> 
         <div class="news-title panel-heading"> 
          <h2 class="panel-title">NEWSFLASH!</h2> 
         </div> 
         <div class="news-items-wrapper"> 
          <ul id="news-items" class="news-items list-group"></ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-9"> 
      <div id="home-content" class="home-content"></div> 
     </div> 
    </div> 
</div> 


</body> 
</html>

這段代碼可以實現「計算機視圖」和「平板電腦縱向視圖」。我可以在使用4個「col-md-3」時做到這一點，但這意味着有時候我可能會在同一行上得到2個項目的通知col或同一行上的1個項目的Notifications col，這不是我想要的。如何在不破壞之前2版的佈局的情況下實現「移動縱向視圖」？謝謝！

來源

2015-10-14 yeeen

您可以對此使用嵌套列。

row 
    col-*-* 
    row 
     col-*-* 
    row 
     col-*-*

審查以全屏Docs和查看工作示例則縮小視圖。

/**FOR DEMO PURPOSES ONLY**/ 
 

 
html, 
 
body { 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 
.alert.alert-info { 
 
    height: 100px; 
 
    border-radius: 0; 
 
} 
 
.alert.alert-info-tall { 
 
    height: 340px; 
 
    border-radius: 0; 
 
} 
 
/**FOR DEMO PURPOSES ONLY**/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-4"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <div class="alert alert-info alert-info-tall">Notifications</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
     <div class="row"> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">1</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">2</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">3</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">4</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">5</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">6</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">7</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">8</div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="alert alert-info">9</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-14 04:50:50 vanburen

你能解釋爲什麼你選擇了「col-lg-4」和「col-lg-8」嗎？我不明白這一部分。 – yeeen

這些人的目的是分開你的列，讓他們站在一起。您選擇的尺寸基本上是您希望分發內容的方式：如果您希望雙方均使用col - * - 6，如果您想要不同的中斷點，請使用col-md- *。如果你調整了這些數字（所以他們等於12：6與6，9與3等），你會看到它是如何工作的。 – vanburen

哦，因爲你使用1：2，我實際上打算有1：3。高校正在與所選的高校合作。因爲我不明白你爲什麼改變col-md- col-lg-。但如果比例正確，似乎也是一樣。 – yeeen

-1

您需要添加一個xs前綴。嘗試添加col-xs-6到兩個div。

<div class="col-md-3 col-xs-6"> 
... 
</div> 
... 
<div class="col-md-9 col-xs-6"> 
      ... 
</div>

來源

2015-10-14 04:31:05

嗨，這不工作。無論我如何調整窗口大小，我都會在同一行上獲取通知列和3個項目。 – yeeen

揣摩Bootstrap Gird Options和你只需要知道什麼時候使用它的屏幕和你是哪個班好去。這裏是工作structure供您參考。

<div class="row"> 
    <div class="left-block col-lg-4 col-md-12 col-xs-12"> 
    Aside Section 
    </div> 
    <div class="content-block col-lg-8 col-md-12 col-xs-12"> 
    <div class="row" style="padding:10px;"> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div> 
    </div> 
    </div> 
</div>

來源

2015-10-14 07:10:47

使用此：

<div class="container"> 
    <div class="col-md-3 col-sm-12 col-xs-12"> 
     <div class="col-xs-12 notification"> 
      <p>Notifications</p> 
     </div> 
    </div> 
    <div class="col-md-9 col-sm-12 col-xs-12"> 
     <div class="row"> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 1</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 2</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 3</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 4</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 5</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 6</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 7</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 8</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <div class="col-xs-12 item"> 
        <p>Item # 9</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

而且這種風格將有助於獲得更好的外觀：

.notification { 
    background-color:#000; 
    height:auto; 
    padding-top: 50px; 
    padding-bottom:50px; 
    margin-bottom:10px; 
} 
.item { 
    background-color:#333; 
    height: auto; 
    margin-bottom:10px; 
} 
p { 
    color:#ffffff; 
}

這裏是小提琴：http://jsfiddle.net/xwmmfu0e/

來源

2015-10-14 07:17:54 nabeel

如何使用bootstrap創建以下響應佈局？

回答

相關問題