Question

我对Bootstrap相当新，并且在导航栏上方放置标题时遇到问题。我需要有一个标题，当前网站的高度至少为70像素，同时我需要确保通过手机看到响应能力。我目前的代码是

<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的示例代码，告诉我如何实现这个目标吗？我听说要维护一些最小填充，以便通过移动设备看到响应式导航。

Answer 1

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

Answer 2

如果您对Bootstrap的标准标题感到疑惑，您还应该了解如何添加子标题。

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

结果：

＆＃13;

<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>

＆＃13;

Answer 3

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

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

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

您可以看到jsfiddle Demo

添加标头到Bootstrap

3 个答案: