Question

我正在为学校做一个项目，我们正在重建一个货运学校的网站。我是引导程序的新手，而我遇到的问题就是这个问题。

当我调整页面大小时，主导航按照预期消失但我无法显示小菜单图标导航。我根据getbootstrap.com和几次搜索尝试了你应该做的所有事情，但没有任何效果。我认为问题的一部分可能是我通过将我的导航区域分成两个容器来做一些hacky的东西，以便带有徽标的顶部可以是与实际菜单的下部不同的颜色 - 没有hacky的东西无论是菜单还是标题都会在两边都有一个不明显的边缘。

所以我不确定我所做的hacky是否会引起问题，如果是这样，我可以做其他事情使导航栏的顶部颜色不同于底部而不会获得不同的彩色边距双方？或者我只需要使用切换代码做一些不同的事情？

这是有问题的HTML（没有切换代码......我在几个地方试过它，所以我把它拿出来希望它更容易阅读）：

<nav class="navbar navbar-static-top" role="navigation">
  <div class="backgroundBlack">
  <div class="container ">
    <div class="navbar-header ">
      <h1><img src="images/logo.png" alt="logo" />Carolina Trucking Academy</h1>
    </div>
  </div>
</div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
      <div class="container">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
        <li role="presentation"><a href="careers.html">Careers in Trucking</a></li>
        <li role="presentation"><a href="classes.html">Our Classes</a></li>
        <li role="presentation"><a href="admissions.html">Admissions</a></li>
        <li role="presentation"><a href="about.html">About Us</a></li>
        <li role="presentation"><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    </div>
</nav>

任何帮助将不胜感激！谢谢！

Answer 1

您只需要遵循bootstrap提供的结构。在较小的屏幕上，导航被隐藏并通过导航栏标题中的按钮切换。你缺少的第一件事是导航栏切换按钮。此按钮将使用data-target=""属性在移动屏幕上定位导航栏折叠。我还将导航栏默认类添加到导航栏。这些是引导程序已经实施的预制样式。另外，为了获得2种不同的背景颜色，我刚刚在navbar-header中将black-bg类添加到容器中，然后将navbar-header css更改为显示块，宽度为100％。如果您想更改导航栏的颜色 - 默认目标是您的css中的类，导航栏的链接部分将更改背景颜色。此外，我在容器的示例中使用了容器流体。如果你愿意的话，你可以把它改成容器我觉得它对容器液看起来更好。

以下是它应该看起来的样子：

 <nav class="navbar navbar-default navbar-static-top">
      <div class="navbar-header">
        <div class="container-fluid black-bg">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Logo</a>
        </div><!--/.container-fluid -->
      </div><!--/.navbar-header -->
      <div id="navbar" class="navbar-collapse collapse">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
            <li role="presentation"><a href="careers.html">Careers in Trucking</a></li>
            <li role="presentation"><a href="classes.html">Our Classes</a></li>
            <li role="presentation"><a href="admissions.html">Admissions</a></li>
            <li role="presentation"><a href="about.html">About Us</a></li>
            <li role="presentation"><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.container-fluid -->
    </div><!--/.nav-collapse -->
  </nav>

用于使导航栏变黑并且导航栏标题全部显示的css，您可以将自定义样式添加到这些类中：

.navbar-default{
  border-radius: 0;
}
.navbar-header{
  display: block;
  width: 100%;
}
.black-bg{
  background: #000;
}

这是一个小提示，向您展示这一点以及它的外观Fiddle

Bootstrap帮助 - 响应式菜单未显示

1 个答案: