无法使顶部导航栏全宽答案

【问题标题】：Can't make top navbar FULL width无法使顶部导航栏全宽
【发布时间】：2015-10-10 19:45:20
【问题描述】：

披露：我尝试在堆栈交换档案中找到此问题的解决方案，但没有任何效果。

我正在尝试在引导程序中创建一个横跨整个页面宽度的导航栏。

我做不到。

我已经尝试使用 col-md-12 类、我自己创建的新类和 navbar-static-top 来执行此操作。它们都不起作用。导航栏的左侧和右侧总是有这个奇怪的 10px 左右的边距。在我看来，在某些父元素或包含导航栏的 div 之一中确实存在填充，但我终生无法找到它。

同样一文不值：页面的其余部分是 col-md-12，没有这个问题。

以下是一些可能相关的 CSS 元素。我基本上把所有东西都调整到了 100% 的宽度。

包含/父元素

html {
font-family: Impact;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
width: 100%;
margin: 0%;
padding: 0%;
}

body {
margin: 0%;
padding: 0%;
height: 100%;
width: 100%;
background-image: url(../images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

.container {
padding-right: 0%;
padding-left: 0%;
margin-right: auto;
margin-left: auto;
height: 100%;
width: 100%;
}

.container-fluid {
padding-right: 0%;
padding-left: 0%;
margin-right: auto;
margin-left: auto;
height: 100%;
}

.col-md-12.alpha {
height: 100%;
width: 100%;
}

尝试创建导航栏本身

  .col-md-12.beta {
  background-color: black;
  height: 10%;
  width: 100%;
  margin: 0%;
  padding: 0%;
  }

  .navbar1 {
  background-color: black;
  opacity: 0.4;
  height: 10%;
  width: 100%;
  margin: 0%;
  padding: 0%;
  }

.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
background-color: black;
min-height: 10px;
}

【问题讨论】：

您能否提供问题页面的 URL？我认为问题出在您代码中的其他地方。
显示你的html页面代码

标签： html css twitter-bootstrap

【解决方案1】：

只需将您的 <nav class="navbar navbar-default navbar-static-top"> 放在 body 的主 div 容器之外。我知道容器必须包装所有引导元素。嗯，不是。即使在他们自己的模板示例中，他们也会在外面去掉<nav> 指令。

不要忘记将导航中的所有内容放入容器中：

<body>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      ...
    </div>
  </nav>
  ...
</body>

【讨论】：