css - Bootstrap 3 复杂的导航栏——一个硬汉

Question

在使用 CSS 编码两年之后，我决定使用 Bootstrap 3 来处理我的下一个元素。除了我的导航栏之外，大部分一切都进行得很顺利，它的设计并不常见(请参见下文)。我很难让它响应。

当它是手机时，我想在左边显示小标志，在右边显示汉堡图标。然后我想要下面带有标语的红色框。但我似乎无法让它像那样崩溃。

这是我的基本代码。我已经放弃了让它响应的努力，因为这些都失败了，只会让人们感到困惑。

谁能想出解决办法？谢谢!

<div class="bluenavbar">
    <div class="container">
        <img class="logo img-response" src="images/logo.png">
        <ul class="nav navbar-nav" role="tablist">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Issues</a></li>
            <li><a href="#">Editorial</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

<div class="redbar">
    <div class="col-md-6">
        <p class="tagline">this is the tagline. this is the tagline. this is the tagline. this is the tagline. this is the tagline. this is the tagline.</p>
    </div>
</div>

--

.bluenavbar {
    height: 50px;
    background-color: #23408f;
    color: white;
}
.logo {
    float: left;
}
.navbar-nav {
    float: right;
}
.redbar {
    background-color: #ff0000;
    height: 50px;
    margin-top: 20px;
    color: white;
}
.tagline {
    margin-left: 60px;
    text-align: center;
    margin-top: 5px;
}

Answer 1

尽量不要让它变得比需要的更复杂。从标准标记开始，添加 Bootstrap 类，使其尽可能接近您的设计。然后在您的自定义中分层。

DEMO

HTML:

<nav class="navbar navbar-blue navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <img class="logo img-response" src="http://placehold.it/225x150/000099/fff&text=LOGO" />
    </div>
    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Issues</a></li>
        <li><a href="#">Editorial</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS

body {
    padding-top: 60px;
}
.navbar-blue {
    background-color: #000099;
    border-color: #000066;
}
.navbar-blue>.container {
    position: relative;
}
.logo {
    position: absolute;
    top: 0;
    left: 15px;
    height: 50px;
}
.navbar-toggle {
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
.navbar-blue .navbar-toggle {
    border-color: transparent;
    color: #fff;
}
.navbar-blue .navbar-nav>li>a {
    color: #fff;
}
.nav>li>a:hover, .nav>li>a:focus {
    background-color: #000066;
}
.navbar-blue .icon-bar {
    background-color: #fff;
    height: 4px;
}
.redbar {
    background-color: #ff0000;
    color: #fff;
    height: 50px;
    padding: 0 15px;
    margin-bottom: 15px;
}
.redbar>p {
    text-align: center;
}
@media (min-width: 768px) {
    .logo {
        height: auto; /*or whatever height you want it*/
    }
    .redbar {
        margin-bottom: 75px;
    }
    .redbar>p {
        max-width: 500px;
    }
}

所以在这里我使用了一个非常基本的导航栏，它是我从文档中剪切和粘贴的。然后我添加了 .navbar-fixed-top 类，让它固定在视口(viewport)的顶部。如文档中所述，我在正文顶部添加了一些填充以调整使用 navbar-fixed-top 类。然后我删除了示例中的无关链接，并替换了 ul 中具有 .navbar-right 类的链接，该类将链接 float 到导航栏的右侧。

从那里，我用 Logo 图像替换了 navbar-brand 并赋予它绝对定位，以便它位于其他元素的“顶部”，根据移动 View 调整它的大小，并使用媒体查询来控制它的当视口(viewport)大于 768px 时的大小(记住尝试先考虑移动设备)。我还在导航栏内提供了具有 .container 类相对位置的元素，以便 Logo 与左侧容器的内部对齐。

接下来，我创建了一个名为 .navbar-blue 的自定义类，并将其设置为具有与您的图像大致匹配的颜色。我只是从 bootstrapcss 文件中复制了 .navbar-default 样式并更改了颜色，但通常我会使用 LESS 来自定义我的颜色。如果您已经了解 LESS 或 SASS，您会喜欢 Bootstrap 为两者提供的支持。

最后，我刚刚创建了带有一些基本样式的红色条:完成并撒上灰尘。