twitter-bootstrap – 将容器嵌套在容器引导程序中

发布时间：2020-12-18 00:14:23 所属栏目：安全来源：网络整理

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

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

解决方法

是的,永远不要将容器嵌入另一个容器.

来自Bootstrap文档：

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.

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

.outer-container {
  background: tomato;
  width: 100%;
}
.container {
  background: lightblue;
}
@media (max-width: 1200px) {
  .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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!