为什么导航栏没有占据全宽？

Question

我正在尝试使用bootstrap创建一个全宽度导航栏，但导航中有一种限制

像这样：

我真正想做的就是这样的事情

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);
    body {
      font-family: "Raleway", Sans-Serif;
      font-weight: 400;
    }
    p {
      text-align: justify;
      font-size: 16px;
    }
    .navbar {
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .navbar-default .navbar-nav .active a,
    .navbar-default .navbar-nav .active a:focus,
    .navbar-default .navbar-nav .active a:hover,
    .navbar-default .navbar-nav li a:hover {
      color: #e1b315;
    }
    .navbar .navbar-nav {
      display: inline-block;
      float: none;
    }
    .navbar-default .navbar-nav li {
      margin: 0 15px;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<div class="row">
  <div class="col-md-12 text-center">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>

Answer 1

<强>解决方案

1. 请勿使用.row或.container将内容换行为全宽。
2. 您需要重置body＆＃39; margin和padding。

<强>段

＆＃13;
＆＃13;
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);

body {
  font-family: "Raleway", Sans-Serif;
  font-weight: 400;
  margin: 0; padding: 0;
}

p {
  text-align: justify;
  font-size: 16px;
}

.navbar {
  font-weight: 700;
  letter-spacing: 2px;

  text-transform: uppercase;
}

.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav li a:hover{
  color:#e1b315;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

.navbar-default .navbar-nav li {
  margin: 0 15px;
}
＆＃13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="text-center">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

输出：http://output.jsbin.com/gicekasiri

Answer 2

这不是唯一的方法，但会完成这项工作。

body {
    font-family: "Raleway", Sans-Serif;
    font-weight: 400;
    margin: 0;
}

只需将margin: 0;添加到您的正文CSS

即可

我已将导航栏设为绿色，因此更容易看到。

＆＃13;

＆＃13;

    @import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100);
    body {
      font-family: "Raleway", Sans-Serif;
      font-weight: 400;
      margin: 0;
    }
    p {
      text-align: justify;
      font-size: 16px;
    }
    .navbar {
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      background-color: green;
    }
    .navbar-default .navbar-nav .active a,
    .navbar-default .navbar-nav .active a:focus,
    .navbar-default .navbar-nav .active a:hover,
    .navbar-default .navbar-nav li a:hover {
      color: #e1b315;
    }
    .navbar .navbar-nav {
      display: inline-block;
      float: none;
    }
    .navbar-default .navbar-nav li {
      margin: 0 15px;
    }

＆＃13;

<div class="row">
  <div class="col-md-12 text-center">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Features</a>
          </li>
          <li><a href="#">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;