![在容器引导程序中嵌套容器]( "在容器引导程序中嵌套容器")
本文介绍了在容器引导程序中嵌套容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在引导程序中获得关于容器的明确答案时遇到了一些麻烦.很明显，您不应该在 .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:
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>
这篇关于在容器引导程序中嵌套容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！