2

いくつかのオプションを試しましたが、ナビゲーション バー全体に 4 つのリンクを配置することができません。span3それぞれにクラスを追加するのはとても簡単だと思いました<li>。ここに私のHTMLがあります：

    <div class="navbar center">
      <div class="navbar-inner">
        <div class="container row">
            <ul class="nav span12">
              <li class="active span3">
                <a href="#">Home</a>
              </li>
              <li class="span3"><a href="#">Link</a></li>
              <li class="span3"><a href="#">Link</a></li>
              <li class="span3"><a href="#">Link</a></li>
            </ul>
        </div>
      </div>
    </div>

リンクを中央に配置するために、ここで説明するソリューションを使用しました: Twitter ブートストラップ navbarの変更

CSSは次のとおりです。

.navbar-inner { 
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

私が何とか得たのはこれだけです: これらの4つのリンクを同じ行にまたがらせるにはどうすればよいですか?

4

2 に答える 2

4

ここで使用するspanXことは最善の解決策ではありません (bootstrap-resonsive.css を使用している場合を除きます。以下を参照してください)。navbar 内のアイテムの数が変化したときに CSS を変更する意思がある限り、パーセンテージを使用できます。

デフォルトの navbar マークアップでこれを機能させることができます。

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

そして 2 つの CSS ルール。最初は のマージンを<ul class="nav">削除し、フロートを削除し、その幅をコンテナーの 100% に設定します (この場合、<div class="container">内の<div class="navbar-inner">.

2 番目のルールは、それぞれの幅を の<li>幅の特定のパーセンテージに設定し<ul>ます。アイテムが 4 つある場合は、 に設定し25%ます。5 つある場合は20%、 などになります。

.navbar-inner ul.nav {
  margin-right: 0;
  float: none;
  width: 100%;
}
.navbar-inner ul.nav li {
  width: 33%;
  text-align: center;
}

jsFiddle デモ

アップデート

レスポンシブ ブートストラップ CSS を使用している場合は、次のspanXように組み込みクラスを使用できます。

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav row-fluid">
                <li class="span4"><a href="#">Home</a></li>
                <li class="span4"><a href="#">Link</a></li>
                <li class="span4"><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

次に、必要なすべての CSS は次のとおりです。

.navbar-inner ul.nav li {
    text-align: center;
}

jsFiddle デモ

于 2012-08-07T18:44:24.017 に答える
1

あなたは良いスタートを切りましたが、あなたのマークアップは実際のグリッドを反映していません:

  • .spanXあなたは入れません.span12
  • .container.row競合するプロパティがある可能性があります

これでうまくいくようです：

<div class="navbar center">
  <div class="navbar-inner">
    <div class="container">
        <div class="row">
            <ul class="nav">
              <li class="active span3">
                <a href="#">Home</a>
              </li>
              <li class="span3"><a href="#">Link</a></li>
              <li class="span3"><a href="#">Link</a></li>
              <li class="span3"><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
  </div>
</div>

デモ (jsfiddle)とフルスクリーン

于 2012-08-07T19:00:14.643 に答える