Bootrstap 4底部导航栏无法删除左右​​边距

时间：2018-09-25 22:20:04

标签： html css twitter-bootstrap

我的头靠在墙上……我不知道为什么我的底部导航栏在左边和右边都有边距。我可能看不到这很简单，但是我盯着它看了太久了！请帮忙。

enter image description here

您将看到：从此屏幕截图中可以清楚地看到，顶部导航栏跨越页面的整个宽度，而底部导航栏则没有。

这是我的html代码的一部分：

 <body>
    <nav class="navbar navbar-expand-sm">

        <!-- Logo -->
        <a class="navbar-brand"><h5 class="brand">Houston Chamber Music Network</h5></a>

        <!-- Navbar links -->
        <ul class="navbar-nav">
            <li class="navbar-item">
                <a class="nav-link active" href="#">HOME</a>
            </li>

            <li class="navbar-item">
                <a class="nav-link" href="#">REGISTER AS COACH</a>
            </li>
            <li class="navbar-item">
                <a class="nav-link" href="#">REGISTER AS MEMBER</a>
            </li>
            <li class="navbar-item">
                <a class="nav-link" href="#">CALENDAR</a>
            </li>
        </ul>

        <!-- Navbar right -->
        <ul class="navbar-nav ml-auto">
            <li class="navbar-item">
                <a class="nav-link" href="#">LOGIN</a>
            </li>
        </ul>
    </nav>

    <!-- main container: -->
    <div class="container-fluid">
        <div class="container-fluid" style="padding-top: 30px">
            <div class="row">
                <div class="col-md-12">
                    <h3>Music is the food of the soul and the spirit.</h3>
                </div>
            </div>
        </div>

        <!-- container for carousel: -->
        <div class="container-fluid" style="padding: 50px">
            <div class="carousel slide" data-ride="carousel">

                <!-- Indicators -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                 <!-- The slideshow -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="1.jpg" alt="" class="img-fluid">
                        <div class="carousel-caption">
                            <h2>Connect</h2>
                            <h4>with musicians in your area.</h4>
                        </div>
                    </div>
                <div class="carousel-item">
                    <img src="2.jpg" alt="" class="img-fluid">
                    <div class="carousel-caption">
                        <h2>Perform</h2>
                        <h4>with new friends.</h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="3.jpg" alt="" class="img-fluid">
                    <div class="carousel-caption">
                        <h2>Learn</h2>
                        <h4>from some of Houston's top professionals.</h4>
                    </div>
                </div>

                <!-- Left and right controls -->
                <!-- <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a> -->
            </div>
        </div>
    </div>

    <!-- fixed bottom navbar: -->
    <nav class="navbar navbar-expand-md">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">CONTACT US</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">FAQ</a>
            </li>
        </ul>
    </nav>

</body>

还有我的CSS：

.brand {
margin-bottom: 0px;
}

h5.brand {
color: #e3f2fd;
font-family: "Arial";
}

.container-fluid {
background-color: #fffef7;
}

.navbar {
background-color: #2c3b4b;
}

a.nav-link {
color: white;
}

a.active {
color: #808080;
}

.navbar .navbar-nav li a:hover {
color: #808080;
}

谢谢您的帮助。

2 个答案:

答案 0 :(得分：1)

问题在于，除了标头外，所有内容都在container-fluid类的内部，该类添加了15px的填充。听起来好像您实际上并不想在容器底部的导航栏位于该容器中；您只是忽略了关闭容器的<div>（将其放置在容器中）。这将导致无效的标记，并且是导致问题的原因。

要解决此问题，您只需要在底部的固定导航栏（关闭</div>类）之前添加缺少的.container-fluid。

.brand {
  margin-bottom: 0px;
}

h5.brand {
  color: #e3f2fd;
  font-family: "Arial";
}

.container-fluid {
  background-color: #fffef7;
}

.navbar {
  background-color: #2c3b4b;
}

a.nav-link {
  color: white;
}

a.active {
  color: #808080;
}

.navbar .navbar-nav li a:hover {
  color: #808080;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<body>
  <nav class="navbar navbar-expand-sm">

    <!-- Logo -->
    <a class="navbar-brand">
      <h5 class="brand">Houston Chamber Music Network</h5>
    </a>

    <!-- Navbar links -->
    <ul class="navbar-nav">
      <li class="navbar-item">
        <a class="nav-link active" href="#">HOME</a>
      </li>

      <li class="navbar-item">
        <a class="nav-link" href="#">REGISTER AS COACH</a>
      </li>
      <li class="navbar-item">
        <a class="nav-link" href="#">REGISTER AS MEMBER</a>
      </li>
      <li class="navbar-item">
        <a class="nav-link" href="#">CALENDAR</a>
      </li>
    </ul>

    <!-- Navbar right -->
    <ul class="navbar-nav ml-auto">
      <li class="navbar-item">
        <a class="nav-link" href="#">LOGIN</a>
      </li>
    </ul>
  </nav>

  <!-- main container: -->
  <div class="container-fluid">
    <div class="container-fluid" style="padding-top: 30px">
      <div class="row">
        <div class="col-md-12">
          <h3>Music is the food of the soul and the spirit.</h3>
        </div>
      </div>
    </div>

    <!-- container for carousel: -->
    <div class="container-fluid" style="padding: 50px">
      <div class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- The slideshow -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="1.jpg" alt="" class="img-fluid">
            <div class="carousel-caption">
              <h2>Connect</h2>
              <h4>with musicians in your area.</h4>
            </div>
          </div>
          <div class="carousel-item">
            <img src="2.jpg" alt="" class="img-fluid">
            <div class="carousel-caption">
              <h2>Perform</h2>
              <h4>with new friends.</h4>
            </div>
          </div>
          <div class="carousel-item">
            <img src="3.jpg" alt="" class="img-fluid">
            <div class="carousel-caption">
              <h2>Learn</h2>
              <h4>from some of Houston's top professionals.</h4>
            </div>
          </div>

          <!-- Left and right controls -->
          <!-- <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a> -->
        </div>
      </div>
    </div>
  </div>

  <!-- fixed bottom navbar: -->
  <nav class="navbar navbar-expand-md">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT US</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">FAQ</a>
      </li>
    </ul>
  </nav>

</body>

我建议您通过 W3C markup validation service 运行您的代码，以避免诸如缺少结束标记之类的事情。

答案 1 :(得分：1)

您必须在页脚<div class="container-fluid">开始之前关闭<nav></nav> 在这里您可以检查它：

https://codepen.io/shakogele/pen/QVXeYJ

相关问题
最新问题