Bootstrap網格系統布局

Question

我有一個關於使用bootstrap的網格系統格式化的問題...
我想實現類似下面圖像的效果，但我似乎唯一能做的就是使用visible-xs和hidden-xs重復布局。 是否可以僅使用bootstrap的網格系統來完成此操作？

移動布局

---

桌面布局

到目前為止，我的代碼如下所示：

<div class="container">
<h1>My Schedules</h1>
<br>
<div class="visible-xs">
    <div class="col-xs-4 text-center">
        <button type="button" class="btn btn-primary">Trimester 1</button>
        <br><br>
    </div>

    <div class="col-xs-4 text-center">
        <button type="button" class="btn btn-primary">Trimester 2</button>
        <br><br>
    </div>

    <div class="col-xs-4 text-center">
        <button type="button" class="btn btn-primary">Trimester 3</button>
        <br><br>
    </div>


</div>

<div class="hidden-xs col-sm-2">
    <div>
        <button type="button" class="btn btn-primary">Trimester 1</button>
        <br><br>
    </div>

    <div>
        <button type="button" class="btn btn-primary">Trimester 2</button>
        <br><br>
    </div>

    <div>
        <button type="button" class="btn btn-primary">Trimester 3</button>
        <br><br>
    </div>

</div>

<div class="col-xs-12 visible-xs" style="background-color:gray; height:50%;"></div>
<div class="col-sm-10 hidden-xs" style="background-color:gray; height:50%;"></div>

</div>

任何幫助表示贊賞！

Answer 1

使用行， http：//getbootstrap.com/css/

包裝你想要的任何東西，如doco中的網格部分所示，然后在需要時使用col-offset在內部調整大小

例：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

每行有12個跨度，你也可以偏移（見鏈接）

編輯

錯誤地粘貼bootstrap2 css，更新到BS3

Answer 2

工作設置。

 .headImg, .bodyImg { width: 100%; height: 250px; } h1 { padding: 10px 20px; } .btn-primary { border-radius: 0px; } .vertical-btn { text-align: center; } .btn-group { margin: 0 auto; text-align: center; width: inherit; display: inline-block; } @media (max-width: 768px) { .vertical-btn .btn-group .btn { margin: 10px; display: inline; } h1 { padding: 10px 20px; text-align: center; } } @media (min-width: 768px) { .vertical-btn .btn-group .btn { margin: 10px 0; display: block; width: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <img src="http://placehold.it/1850x250/444/fff" class="headImg"> <div class="container-fluid"> <div class="row"> <h1>My Schedules</h1> <div class="col-sm-2"> <div class="vertical-btn"> <div class="btn-group"> <button type="button" class="btn btn-primary">Trimester 1</button> <button type="button" class="btn btn-primary">Trimester 2</button> <button type="button" class="btn btn-primary">Trimester 3</button> </div> </div> </div> <div class="col-sm-10"> <img src="http://placehold.it/850x250/444/fff" class="bodyImg" /> </div> </div> </div> 

Answer 3

我會這樣做（我沒有測試過，但你明白了）：

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="row">
        <div class="col-xs-4 col-sm-12">
          <button type="button" class="btn btn-primary">Trimester 1</button>
        </div>
        <div class="col-xs-4 col-sm-12">
          <button type="button" class="btn btn-primary">Trimester 2</button>
        </div>
        <div class="col-xs-4 col-sm-12">
          <button type="button" class="btn btn-primary">Trimester 3</button>
        </div>
      </div>
    </div>
    <div class="col-md-10">
      <!-- Here you put the grey rectangle -->
    </div>
  </div>
</div>

這樣，您的三個三個月按鈕將在較小的設備中顯示在同一行中，灰色矩形在另一行中。