Question

我在引导程序中获取容器的确定答案时遇到了一些麻烦。很明显，你不应该在.container中嵌套.container-fluid，反之亦然，但是可以将.container嵌套在另一个.container中吗？我正在尝试创建一个布局，其外部div将是全宽度，内部div将小于保存内容，框内的框。我不确定在bootstrap中执行此操作的正确方法是什么。

Answer 1

是的，永远不要将容器嵌套在另一个容器中。

来自Bootstrap文档：

<强>集装箱

Bootstrap需要一个包含元素来包装网站内容和   安置我们的网格系统。您可以选择使用两个容器中的一个   你的项目。需要注意的是，由于填充量较多，既不是容器   是可嵌套的。

您可以将.container包装在宽度为100％的自定义类.outer-container中。当屏幕尺寸减小时，将宽度设置为接近75％，以显示内部容器的宽度较小。

＆＃13;

.outer-container {
  background: tomato;
  width: 100%;
}
.container {
  background: lightblue;
}
@media (max-width: 1200px) {
  .container {
    width: 75%;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="outer-container">
  <div class="container">
    I am fixed
  </div>
</div>

＆＃13;

Answer 2

根据Bootstrap 3 documentation

请注意，由于填充等原因，两个容器都不可嵌套。

但是，在Bootstrap 3中，一个navbar内有一个.container，同时它也可以全部被一个较大的.container包围。因此，.container中有一个.container，这不是错误。要验证是否可以在此处查看页面源，请参见Bootstrap文档：https://getbootstrap.com/docs/3.3/examples/navbar/

Answer 3

对于Bootstrap 4，可以嵌套容器。

容器   容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时是必需的。从响应式，固定宽度的容器（表示每个断点处的最大宽度发生变化）或流体宽度（表示始终保持100％的宽度）中进行选择。

虽然可以嵌套容器，但大多数布局不需要嵌套容器。

参考：https://getbootstrap.com/docs/4.0/layout/overview/

将容器嵌套在容器引导程序中

3 个答案: