Question

我是新手，所以请原谅任何公然的无知。我似乎无法摆脱.container-fluid内部内容周围的“填充”（红色圆圈）。我可以看到.container-fluid确实在利用屏幕的整个宽度（灰色背景），但是除行中的<p>标记外，其中的所有内容都有我无法摆脱的填充物2，第1栏（蓝色正方形）。我也不明白为什么会这样。如何摆脱不必要的填充，以及为什么<p>标签上没有这种填充？

注意：这是在右侧镜像的（不需要的填充）。

.container-fluid {
    padding: 0 0 0 0;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-left: 0;
    margin-right: 0;
}
.col {
    margin-left: 0;
    margin-right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container-fluid" style="background-color: gray;">
    <div class="row">
        <div class="col">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a href="index.php" class="navbar-brand">%company name%</a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.php">Home</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
            <p>left nav-bar</p>
        </div>
        <div class="col-xs-11">
            <p>main content</p>
        </div>
    </div>
</div>

Answer 1

Bootstrap具有大量预定义样式，只需添加！填充样式的结尾很重要

Padding: 0 !important;
Margin: 0!important;

我的手机上提供的答案，当我在台式机上时，我可以重新编写脚本

Answer 2

始终将!important放入CSS代码。

这是什么，它将覆盖所有预定义的CSS样式-在这种情况下，这是来自bootstrap.css文件。

.container-fluid {
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.row, .col {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Answer 3

答案很简单：您不必将导航栏包装在容器中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="index.php" class="navbar-brand">%company name%</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.php">Home</a>
        </li>
      </ul>
    </div>
  </nav>
<div class="container-fluid" style="background-color: gray;">
  <div class="row">
    <div class="col-xs-1">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
      </ul>
      <p>left nav-bar</p>
    </div>
    <div class="col-xs-11">
      <p>main content</p>
    </div>
  </div>
</div>

如何删除Bootstrap导航栏上的填充

3 个答案: