8

我对 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 的示例代码，说明我如何实现这一点吗？正如我听说的那样，要保持一些最小填充，以便通过移动设备看到响应式导航。

4

3 回答 3

14

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

于 2013-05-27T18:30:11.570 回答
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>

于 2015-10-06T21:35:22.950 回答
1

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

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

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

你可以看到一个 jsfiddle Demo

于 2013-03-09T01:10:14.070 回答