Question

我的目标是在我的页面上实现以下图像：

我设法通过下面的HTML和CSS实现了这一点，但它看起来并不可行，因为侧边栏由于position: absolute而失去了它的物理高度。

我想知道是否可以在左边的两列和右边的侧边栏上创建一行，而不必使用定位。我尝试使用position: relative为top col-md-9，但由于顶部top的高度发生了变化（取决于输入的内容），我无法给它一个负{{1} }}。它只是太静态而且无法维护。

更改HTML中的顺序并不会改变任何内容，因为侧边栏的物理高度会使第二个内容向下移动。

＆＃13;

.sidebar { 
  position: absolute;
  width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-9">
    Changing content
  </div>
  <div class="col-md-3 sidebar">
    Sidebar
  </div>
  <div class="col-md-9">
    More content
  </div>
</div>

＆＃13;

Answer 1

我在此示例中使用xs列，但您可以在页面中更改为md。

首先创建一个9列和一个3列div。然后在9列中放入两个div。

.content, .sidebar {
  margin: 10px;
  padding: 20px;
}

.content {
  background-color: navy;
  color: white;
}

.sidebar {
  background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row wrapper">
  <div class="col-xs-9">
    <div class="row">
      <div class="col-xs-12">
        <div class="content">Content</div>
      </div>
      <div class="col-xs-12">
        <div class="content">Content</div>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="sidebar">Sidebar</div>
  </div>
</div>

Answer 2

您可以将col-x-x嵌套在其他col-x-x中您只需创建2个父项：内容和侧边栏，然后将多个内容添加到内容父级：

<div class="row">
    <div class="col-md-9">
        <div class="col-md-12">
          Content
        </div>
        <div class="col-md-12">
          More content
        </div>

    </div>
    <div class="col-md-3 sidebar">
        Sidebar
    </div>

</div>

Answer 3

除非未在自定义网格中定义，否则连续12列不能超过。

您可以尝试的是：

<div class="row">
    <div class="col-md-9">
        <div class="row">
                <div class="col-sm-12">
                     Changing content
                </div>
                <div class="col-sm-12">
                    More content
                </div>
            </div>
    </div>
    <div class="col-md-3" style="position: relative;">
        <div class="row">
            <div class="col-sm-12 sidebar">
                 Sidebar
            </div>
        </div>
    </div>
</div

Answer 4

作为解决方案，如果您要制作左侧部分overflow: auto，则可以让侧边栏保持在屏幕的右侧。

.sidebar {
  height: 100vh;
  background: lightgreen;
}
.left-section {
  height: 100vh;
  background: lightblue;
  overflow: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
    <div class="col-sm-9 left-section">
      <div class="row">
        <div class="col-sm-12">
          Changing content
        </div>
        <div class="col-sm-12">
          More content
        </div>
      </div>
    </div>
    <div class="col-sm-3 sidebar">
        Sidebar
    </div>
</div>
</div>

两个左浮动的cols和右浮动的侧边栏Bootstrap

4 个答案: