8

私は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を含むサンプルコードを提供してもらえますか？モバイルデバイスを通して見た場合にレスポンシブナビゲーションが機能するように、最小限のパディングを維持する必要があると聞きました。

4

3 に答える 3

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

画像の幅を1000pxとすると、次の方法でナビゲーションバーの上にdivまたはhtml5ヘッダーブロックを配置できます。

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

上記のコードの後に​​ナビゲーションバーを配置できます。

あなたはjsfiddleデモを見ることができます

于 2013-03-09T01:10:14.070 に答える