0

現在の見出しがベストかどうかはわかりませんが、これ以上のものは思いつきませんでした。

私はこのメニューを持っています（黒/逆の線）：

ここに画像の説明を入力

メニューのサイズを変更すると、メニュー 1 をヘッダーとするリスト形式になります。

ここに画像の説明を入力

このリスト ビューが必要ないので、テキストを新しい行に再フォーマットするだけで、一番下の行と同じように機能させるにはどうすればよいですか?

私のコード:

<div class="mymenu navbar navbar-fixed-top navbar-inverse" role="navigation">
  <a class="navbar-brand" href="./">My Project</a>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#menu1" data-toggle="tab">Menu 1</a></li>
    <li><a href="#menu2" data-toggle="tab">Menu 2</a></li>
    <li><a href="#menu3" data-toggle="tab">Menu 3</a></li>
    <li><a href="#menu4" data-toggle="tab">Menu 4</a></li>
    <li><a href="#menu5" data-toggle="tab">Menu 5</a></li>
    <li><a href="#menu6" data-toggle="tab">Menu 6</a></li>
    <li><a href="#menu7" data-toggle="tab">Menu 7</a></li>
    <li><a href="#menu8" data-toggle="tab">Menu 8</a></li>
    <li><a href="#menu9" data-toggle="tab">Menu 9</a></li>
  </ul>
</div>

ここにフィドルがありますhttp://jsfiddle.net/G5N67/

4

1 に答える 1

0

これは、次のルールによって発生します。

@media (min-width: 768px) {
    .navbar-nav>li {
        float: left;
    }
}

width < 768pxこれらのルールを CSS に追加することで、単純にオーバーライドできます。

/* The one your looking for */
.navbar-nav>li {
    float: left; 
}
/* Other rules for visual issues */
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

ここに画像の説明を入力

更新されたフィドル

于 2013-11-14T09:59:40.630 に答える