无法使顶部导航栏全宽-Java 学习之路

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

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

我不能这样做 .

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

也没什么值得的：页面的其余部分是col-md-12并没有这个问题 .

以下是一些可能相关的CSS元素 . 我的尺寸基本上都是100％宽度 .

containing/parent elements

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

Attempts at creating the navbar itself

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

1 回答

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>
```
回复于 2024-04-23T16:21:34+08:00

无法使顶部导航栏全宽

1 回答

相关问题