1

レスポンシブ ブートストラップ ナビゲーション バーに希望するスタイルを実現するのに苦労しています。

私はbootstrap/cssにかなり慣れていません.jsfiddle http://jsfiddle.net/YfmwV/は、これまで一緒にハッキングしたものです。

<div class="navbar">
    <div class="navbar-inner"> <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 class="nav-collapse">
            <ul class="nav">
                <li class="active"><a href="#">Home</a>

                </li>
                <li><a href="#">Showtime</a>

                </li>
                <li><a href="#">Motivation</a>

                </li>
                <li><a href="#">About</a>

                </li>
                <li><a href="#">Testimonials</a>

                </li>
                <li><a href="#">Gallery</a>

                </li>
                <li><a href="#">Merchandise</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </div>
    </div>
</div>

この問題は、次のコードに関連しています。これは、大画面ビューで私が求めているものを実現しますが、レスポンシブ モードでメニューを完全に台無しにします。

.navbar .nav>li {
    width: 12.5%;
}

左または右に配置するのではなく、navbar アイテムを navbar のスペース全体に配置しようとしています。これを行う唯一の方法は、幅をパーセンテージに設定することでした。これは理想的ではありません。

誰かが私を正しい方向に向けることができれば、それは素晴らしいことです.

4

2 に答える 2

0

私はあなたが何を意味するのか完全には理解していませんが、私が理解できる限り、どちらの側にもパディング/マージンを持たないように、ホバーとアクティブな効果を持たせたいと考えています。

Navbar-inner には左右に 20px のパディングがあります。それらを 0 に設定すると、バーはメニューの全幅を占めます。

.navbar-inner {
padding-right: 0;
padding-left: 0;
}

これはあなたが意味するものですか？

于 2013-05-07T13:14:16.203 に答える