在容器引导程序中嵌套容器 [英] Nesting container within a container bootstrap

问题描述

我在引导程序中获得关于容器的明确答案时遇到了一些麻烦.很明显，您不应该在 .container-fluid 中嵌套 .container，反之亦然，但是可以嵌套 .container在另一个 .container 中?我正在尝试创建一个布局，该布局具有一个全宽的外部 div 和一个较小的内部 div，该内部 div 包含内容，一个盒子中的一个盒子.我不确定在引导程序中执行此操作的正确方法是什么.

解决方案

根据 v4 文档，它可以嵌套，但在大多数情况下您不需要它:Bootstrap v4 布局文档

---

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

来自 Bootstrap v3 文档:

<块引用>

容器

Bootstrap 需要一个包含元素来包装站点内容和容纳我们的网格系统.您可以选择两个容器中的一个来使用你的项目.请注意，由于填充和更多，容器是可嵌套的.

您可以将 .container 包裹在具有 100% 宽度的自定义类 .outer-container 中.缩小屏幕尺寸时设置宽度接近75%，以显示内部容器的宽度更小.

.outer-container {背景:番茄；宽度:100%；}.容器 {背景:浅蓝色；}@media(最大宽度:1200px){.outer-container .container {宽度:75%；}}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><div class="外容器"><div class="容器">我是固定的

I'm have a little bit of trouble getting a definitive answer on containers in bootstrap. It's clear that you should not nest a .container within a .container-fluid and visa versa, but is it ok to nest a .container within another .container? I am trying to create a layout that has an outer div that will be full width and an inner div that will be smaller that holds content, a box within a box. I'm not sure what the proper way to do this in bootstrap is.

解决方案

Edit:

According to v4 docs, it can be nested but you do not require it in most cases: Bootstrap v4 layout doc

---

Yes, never nest a container inside another.

From the Bootstrap v3 Docs:

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

You can wrap the .container inside custom class .outer-container which has 100% width. Set a width near 75% when the screen size is reduced to show that the inner container has a smaller width.

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

<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>

这篇关于在容器引导程序中嵌套容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！