9

私は Bootstrap を初めて使用し、navbar を理解することに取り組んできました。ブラウザーが全幅 (ワイドスクリーン) の場合、ブランド タイトルとナビゲーション アンカーは、ウィンドウが小さい場合のようにページの左端に配置されるのではなく、ページの左中央に配置されます。ナビゲーションバーのテキストをページの左側に配置するにはどうすればよいですか? ブラウザ ウィンドウの幅に関係なく、ウィンドウの左側に固定できるようにしたいと考えています。これを行わない特別な理由はありますか？

これはjsFiddle のライブ デモです。ハンドルを引いてビューポートをできるだけ左に広げると、テキストは最終的にナビゲーションバーの中央に向かって移動することに注意してください。

私の navbar マークアップは、ブートストラップで提供されるスターター デモと同じです。レスポンシブ機能とアイコンがフィドルに接続されていないことはわかっていますが、それらは私のローカル プロジェクトで作業しており、質問には関係ありません。カスタムCSSを残してテキストを揃える必要があると思いますが、これを適用しようとして失敗しました。どんな助けでも大歓迎です。

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
        <a 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>
          </a>
      </div>
    </div>
4

2 に答える 2

17

ブランドはコンテナ div 内にあり、このコンテナ div はビューポートまたはブラウザ ウィンドウの幅に基づいてさまざまな幅で常に中央に配置されるため、「中央に配置」されます。

より対称的な外観になるため、そのままにしておくことをお勧めします。それでも変更したい場合は、コンテナ div からブランド リンクを削除するだけです。そのようです：

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
      <a class="brand" href="#">Project name</a>
      <div class="container">
         <div class="nav-collapse collapse">
         ...
于 2012-12-16T18:13:44.643 に答える
12

これを行うにはもっと簡単な方法があるかもしれません (少なくとも最近のバージョンのブートストラップでは)。

<div class="container">を byに置き換えるだけ<div class="container-fluid">です。

これにより、ヘッダーのコンテンツのコンテナーがページ幅全体に広がるようになります。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <a class="brand" href="#">Project name</a>
    <div class="nav-collapse collapse">
...
于 2014-10-15T22:32:04.920 に答える