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>

感谢您的帮助！

- Aidan Vanleuven

---

使用行，http://getbootstrap.com/2.3.2/scaffolding.html。将您想要的任何内容包装在<div class='row'></div>中，如文档中的网格部分所示，然后根据需要使用col-offset进行内部大小调整。抱歉没有时间使用您的代码模拟（开始了fiddle但花费太长时间），但非常容易从网站上的示例中看到。 - Daniel Brose

Answer 1

使用行，http://getbootstrap.com/css/。

像文档中的网格部分所示，可以将任何内容包装在内，然后根据需要在内部使用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个span，你也可以进行偏移（请参见链接）。

编辑

错误地粘贴了Bootstrap2的CSS，已更新为BS3。

- Daniel Brose

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>

- vanburen

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>

这样，在较小的设备上，您的三个季度按钮将全部出现在同一行中，而灰色矩形则出现在另一行中。

- ElectricSid

---

谢谢，嵌套的行和列让我感到困惑，但这解决了我的问题！ - Aidan Vanleuven

我理解你的感受，我也曾几次遇到过这种困难。能够帮忙是我的荣幸，^_^ - ElectricSid