0

次のようなナビゲーションバーを設計しようとしています:

ナビゲーションバーが欲しかった

表にすると、次のようになります。

行のあるナビゲーションバーが欲しかった

しかし、これまでの私の試みはすべて失敗しました。おそらく、私の最善の試みは次のとおりです。

<div class="pull-right">
<g:img dir="images" file="logo2.gif"/>
</div>

<div class="row-fluid">
<div class="logo pull-left">
    <g:img dir="images" file="logo.gif"/>
</div>

<nav class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
        ...
        </div>
    </div>
</nav>

生成するもの:

たぶん最善の試み

4

1 に答える 1

1

ここにデモがあります: http://codepen.io/anon/pen/nCoyB

単一の行を作成し、それに応じて div のスタイルを設定するか、Bootstrap の行が必要な場合は、高さとマージンをいじります。

この解決策は後者です。Logo-1とnav;の間にギャップがあることに注意してください。これは、BS の.spanxクラスにマージンがあるためです。あなたはそれを乗り越えることができます。

<div class="row-fluid">
  <div class="span3">
    <div class="logo-1">Logo 1</div>
  </div>

  <div class="span9">
    <div class="row-fluid">
      <div class="span12">
        <div class="logo-2 pull-right">Logo 2</div>
      </div>
      <div class="span12">
        <nav class="nav">Nav</div>
      </div>      
    </div>
  </div>
</div>


.logo-1 {
  border: 1px solid #ccc;
  height: 70px;
  margin: 30px 0;
  padding: 10px;  
}

.logo-2 {
  border: 1px solid #ccc;
  height: 65px;
  margin: 0 0 10px;
}

nav {
  border: 1px solid #ccc;
  height: 40px;
  width: 100%;
}
于 2013-07-20T22:29:10.460 に答える