Question

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

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

我不能这样做。

我尝试过使用col-md-12类，我自己创建的新类和navbar-static-top。他们都没有工作。导航栏的左侧和右侧总是有这么奇怪的10px左右的边距。在我看来，在某些父元素或包含导航栏的div中有一个填充，但我不能为我的生活找到它。

也值得一无所知：页面的其余部分是col-md-12并没有这个问题。

以下是一些可能相关的CSS元素。我基本上把所有东西的大小调整为100％宽度。

包含/ parent元素

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;
}

Answer 1

将你的主要div容器外的<nav class="navbar navbar-default navbar-static-top">带到身体内。我知道容器必须包装所有引导元素..嗯，它不是。即使在他们自己的模板示例中，他们也会在外面删除<nav>指令。

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

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

无法使顶部导航栏全宽

1 个答案: