将标头添加到引导程序答案

【问题标题】：Adding a Header to Bootstrap将标头添加到引导程序
【发布时间】：2013-03-08 16:49:11
【问题描述】：

我是 Bootstrap 的新手，在导航栏上方放置标题时遇到了麻烦。我需要为当前网站设置一个高度至少为 70 px 的标题，同时我需要确保通过手机查看时响应能力有效。我当前的代码是

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a>

          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a>
              </li>
</ul>
          </div>
        </div>
      </div>
    </div>

我认为我能做的就是添加

<header></header>

在导航栏上方并将我的徽标放在那里。

有人可以为我提供一个带有 css 的示例代码，说明我如何实现这一点吗？我听说要保持一些最小填充，以便通过移动设备看到响应式导航。

【问题讨论】：

如果您希望 CSS 处于固定位置，您必须覆盖它。您是否尝试过将自定义标题放在 .navbar div 的开头（就在 .navbar-inner 之前）？
我没有，那行得通吗？你能提供一些示例代码吗？

标签： html css twitter-bootstrap html5boilerplate

【解决方案1】：

添加一个标题标签并给它"page-header" 类。这将为您的网站提供一个漂亮的小标题。

【讨论】：

太棒了！像这样<header class="navbar navbar-fixed-top navbar-inverse"></header> <header class="page-header"></header> 将两个
堆叠在上面是否可能或更好？

【解决方案2】：

如果您想了解 Bootstrap 的标准标题，您还应该了解如何添加子标题。

<div class="page-header">
  <h1>Your mother was a hamster 
      <small>and your father smelt of elderberries</small>
  </h1>
</div>

结果：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
  <h1>Your mother was a hamster
    <small>and your father smelt of elderberries</small>
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

【讨论】：

【解决方案3】：

您可以通过以下方式在导航栏上方放置 div 或 html5 标题块，假设您的图像宽度为 1000px：

<header>
<img src="http://placehold.it/1000x70"/> 
</header>

您可以将导航栏放在上述代码之后。

你可以看到一个 jsfiddle Demo

【讨论】：