Question

我想用bootstrap框架进行这种布局：

    |   | menu       x |    |
    -------------------------
    ** **  full width  ** **
    -------------------------
    |   | site content |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    -------------------------

我想要一个“容器流体”div拿着一个“容器”菜单，它工作正常，我的问题是我需要在菜单下添加一个“全宽”div，我不知道如何做到这一点。网站内容应该具有“容器”类，而“全宽”div“容器流体”，但我知道不可能嵌套这样的类。

我怎么能用css解决这个问题，记住“菜单”固定在顶部，“全宽”div必须正常滚动？我想我不能用绝对定位。我希望它很清楚，否则我会尝试改进这个问题。

Answer 1

我会做三个不同的容器，每个容器都相应地保存标题，全宽和网站内容

<div class="container"></div> <!-- header here -->
<div></div> <!-- full width here -->
<div class="container"></div> <!-- site content here -->

Answer 2

你可以使用定位，并且通过使用三个不同的“面板”，您可以将它们放置在页面上的任何位置（并使它们响应）。例如：

.html,
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}
.leftpanel,.rightpanel {
  width: 20%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: lightgray;
}
.rightpanel {
  left:auto;
  right: 0;
}
.content {
  width: 60%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 20%;
  background: gray;
}

<div class="container">
  <div class="leftpanel">Left Side</div>
  <div class="content">Body container</div>
  <div class="rightpanel">Right Container</div>
</div>

Answer 3

这很容易做到，但你不能将它们全部放在1个容器类中：

header.container
   ... menu
div.container-fluid
   ... banner
div.container
   ... content

如果您将菜单“修复”到顶部，只需在您的身体上添加一个填充至少高度的菜单。

Answer 4

如果是全宽，那么只需将填充/边距设置为0（我知道这不是最佳做法）

bootstrap css，如何在容器内制作全宽div

4 个答案: