如何在内容中使用 Bootstrap 容器类的全宽度？答案

【问题标题】：How to use the full of width of Bootstrap container class in content?如何在内容中使用 Bootstrap 容器类的全宽度？
【发布时间】：2021-01-04 18:12:10
【问题描述】：

在网站设计中，我想要一个使用 Bootstrap 的自定义导航栏。我没有将导航栏保持在顶部，而是从顶部保留 52px 的边距，并使用与引导导航栏相同的代码，如下所示：

<div class="container main-wrapper">
      <div class="navbar-wrapper">
        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dropdwon" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="dropdwon">

              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
    </div>

main-wrapper类后面的代码是：

.main-wrapper {
    border: 1px solid #ddd;
    -webkit-box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    box-shadow: 3px 4px 13px 4px rgba(50, 50, 50, 0.75);
    
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

但问题是：我的导航栏没有使用引导 container 类的全部宽度。它从左侧和右侧留下一些宽度。让我们检查一下我的问题的图像：

谁能告诉我如何解决这个问题？

【问题讨论】：

尝试“容器流体”

标签： html css twitter-bootstrap

【解决方案1】：

这是由于 main-wrapper 中的容器类。在main-wrapper 中将container 更改为container-fluid。导航栏周围的空间是由于默认填充：每当你添加容器时都会有 15px。

添加.main-wrapper { padding: 0px; }

这是您的工作代码笔：http://codepen.io/SESN/pen/Mejyrx

【讨论】：

我需要全宽：所以当类是容器时，我想要容器类的宽度（可能为 83-86%），当它是容器流体类时，我想要 100% 的宽度。跨度>
添加此代码。我已经更新了我的代码笔。 .main-wrapper{ padding: 0px; }

【解决方案2】：

试试这个

container-fluid 主 div 上的类（带有包装类）使其使用文档的全宽。

.main-wrapper 中的padding: 0px 使其使用其父容器的全宽

https://jsfiddle.net/jb6nqs50/1/

【讨论】：