两列 Bootstrap 布局

Question

我有两个组，A 和 B。在移动视图中，侧边栏将堆叠在 A 内容之上。对于 B 组也是如此。但是，我在两列 Bootstrap 布局中遇到了两个问题。

第 1 期在移动视图中，内容 A 卡在边栏 B 后面。我尝试添加浮动类并清除浮动、z-index、定位等，但我无法让它们堆叠 A， B,A,B =/

第 2 期 ...是我确实希望最大高度为 100%，但我得到的只是 A 组的 100% 高度。我可以使用什么方法让 A 组和 B 组（一起）适合 100页面上的百分比？

我的代码如下；我感谢所有帮助！非常感谢。

HTML

<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
  <div class="col-sm-4 a">
      Sidebar content A
  </div>
  <div class="col-sm-8">
      Body content A
  </div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->

<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
  <div class="col-sm-4 b">
      Sidebar content B
  </div>
  <div class="col-sm-8">
      Body content B
  </div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->

CSS

html,body,.col-sm-12,.container-fluid, .row {
  height:100%;
}
.row > div {
  height:100%;
}
.a, .b {
    background-color:#e5e5e5;
}

JSFiddle

请让我知道我遗漏了什么。

Answer 1

您可以添加

col-xs-12

添加到您的 div 以阻止奇怪的重叠 - 这样您的 html 就会显示为

<div class="col-sm-4 col-xs-12 a">
  Sidebar content A
</div>
<div class="col-sm-8 col-xs-12">
  Body content A
</div>

关于高度问题，您可以对您的行应用新的 class 并按如下方式更新您的 css：

html,
body {
  height: 100%;
}
.container-fluid {
  height: 50%;
}
.col-sm-12,
.fullheight {
  height: 100%;
}
.a,
.b {
  background-color: #e5e5e5;
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="col-sm-12">
    <div class="row fullheight">
      <div class="col-sm-4 col-xs-12 fullheight a">Sidebar content A</div>
      <div class="col-sm-8 col-xs-12 fullheight">Body content A</div>
    </div>
    <!-- end row -->
  </div>
  <!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->
<div class="container-fluid">
  <div class="col-sm-12">
    <div class="row fullheight">
      <div class="col-sm-4 col-xs-12 fullheight b">Sidebar content B</div>
      <div class="col-sm-8 col-xs-12 fullheight">Body content B</div>
    </div>
    <!-- end row -->
  </div>
  <!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->

两列 Bootstrap 布局

Two Column Bootstrap Layout

html

css

grid

twitter-bootstrap