用菜单水平填充页面答案

【问题标题】：Fill the page horizontaly with a menu用菜单水平填充页面
【发布时间】：2018-03-12 23:23:12
【问题描述】：

所以，我有这个菜单：

如何使菜单水平填充整个页面？我是否使用了错误的引导类？它只是填满了页面的一部分。有人可以教我在这里做什么吗？

ul {
  list-style-type: none;
  border-bottom-style: solid;
  border-bottom-color: green;
  position: relative;
}
li {
  display: inline;
  padding: 30px;
}
#menu a {
  color: black;
}
#menu a:hover {
  color: green;
  font-weight: 700;
  text-decoration: none;
  border-bottom-style: solid;
  border-bottom-color: green;
  border-bottom-width: 6px;
  border-radius: 4px;
}

<body>
  <section>
    <div class="navbar navbar-default" role="navigation">
      <div class="container-fluid wrapper">
        <div class="navbar-header">
          <ul id="menu">
            <div class="row">
              <div class="col-md-12">
                <li><img src="Imagens/Logo.png"></li>
                <li id="menu1"><a href="#">About us</a></li>
                <li><a href="#"> Act</a></li>
                <li><a href="#"> News</a></li>
                <li><a href="#"> Videos</a></li>
                <li><a href="#"> Contact us</a></li>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </section>
</body>

【问题讨论】：

标签： html css navbar bootstrap-4

【解决方案1】：

您可以使用以下代码将 navbar-header 的宽度设置为 100%，以使 varbar 水平覆盖整个长度，但它不会完善功能性导航栏。

.navbar-header{
  width:100%
  }

原因是，看起来这可能是您尝试与 bootstrap 4 一起使用的 Bootstrap 3 导航栏，这就是它无法正常工作的原因。 BS3 和 BS4 的类不同。

查看http://getbootstrap.com/docs/4.0/examples/navbars/ 获取有关如何实现引导程序 4 导航栏的示例。

【讨论】：

【解决方案2】：

我不是 bootstrap 方面的专家，我不知道该类用于做什么，但如果我删除 div-element: <div class="navbar-header"></div> 它在我的 Chromium 中工作。

使用 Chromes 开发者工具，您可以找到这样的错误（Ctrl+Shift+I 或 Ctrl+Shift+C 直接使用元素检查器）

也许您可以在 <li> 标签周围的包装 div 上添加 style="text-align: justify"; 以动态设置菜单条目之间的空格。

希望对你有帮助。

【讨论】：