Question

所以，我有这个菜单：

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

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>

Answer 1

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

.navbar-header{
  width:100%
  }

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

检查http://getbootstrap.com/docs/4.0/examples/navbars/以获取有关如何实施bootstrap 4导航栏的示例。

Answer 2

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

使用Chromes Developer Tools，您可以找到这样的错误（Ctrl + Shift + I或Ctrl + Shift + C直接使用Element Inspector）

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

希望它会对你有所帮助。

用菜单填充页面

2 个答案: