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

工作设置。

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

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>

这样，您的三个三个月按钮将出现在较小设备的同一行中，灰色矩形出现在另一行中。

Bootstrap网格系统布局

3 个答案: