时间戳

首页 > 解决方案 > 我可以在容器流体标签内使用容器标签吗？

css - 我可以在容器流体标签内使用容器标签吗？

问题描述

我目前正在设计一个网站，需要知道是否可以在容器流体标签中使用容器标签？使用它是一种好的设计方法吗？

标签： cssbootstrap-4

解决方案

您可以根据需要执行此操作，但通常没有必要，因为它们的主要目的是作为外部包装器。需要注意的主要是15pxBootstrap 容器两侧的填充，以及它们不同的max-width媒体查询。

嵌套时，子 .container 在任何时候都不会填满屏幕的宽度。

引导容器概述。

Bootstrap.css 源代码。打开它，ctrl + f然后搜索.container、.container-fluid以及sm、md、lg和xl容器大小以查看它们的样式。

在全页模式下打开以下代码片段示例并重新调整大小以查看它们在 .container-fluid 中、没有 .container-fluid 以及多个 .container div 相互嵌套的效果。

.container-fluid {
  background:pink
}
.container, .container-sm, .container-md, .container-lg, .container-xl {
  border: 1px solid black;
  background: lightblue;
}
.not-a-bootstrap-container {
  background: orange;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid">
  <h2>
  Within container-fluid
  </h2>
  <div class="container">
    .container
  </div>
  <div class="container-sm">
    .container-sm
  </div>
  <div class="container-md">
    .container-md
  </div>
  <div class="container-lg">
    .container-lg
  </div>
  <div class="container-xl">
    .container-xl
  </div>
</div>
<div class="not-a-bootstrap-container">
  <h2>
    Without container-fluid
  </h2>
  <div class="container">
    .container
  </div>
  <div class="container-sm">
    .container-sm
  </div>
  <div class="container-md">
    .container-md
  </div>
  <div class="container-lg">
    .container-lg
  </div>
  <div class="container-xl">
    .container-xl
  </div>
</div>
<div class="container-fluid">
  <h2>
    Multiple nested containers (within Container-Fluid)
  </h2>
  <div class="container">
    <div class="container">
      <div class="container">
        Three .container divs nested within eachother in a .container-fluid
      </div>
    </div>
  </div>
</div>

推荐阅读