2

レスポンシブ ナビゲーションに水平分割線を追加したい。これは、モバイルでのブートストラップ レスポンシブ ビューです。

ここに画像の説明を入力

最後の 2 つのメニュー項目、つまり「リンク」メニュー項目と「ドロップダウン」メニュー項目の間に仕切りを追加したいと考えています。次を追加すると<li class='divider></li>'

それらの間では、機能していません。それを行う他のブートストラップ方法はありますか？または、レスポンシブ グリッドでこれを実現するために独自のクラスを作成する必要がありますか?

4

2 に答える 2

6

以下のように @media クエリを記述する必要があります:
See Divider in Browser- Resize browser to check
JSFiddle with Divider in collapsible nav

仕切りのあるブラウザのスクリーンショット

 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) {
    .nav-collapse .nav > li.divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
   *margin: -5px 0 5px;
    overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
     }
     }
 @media (min-width: 600px){
   .nav-collapse .nav > li.divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
  }
  }
 /* Landscape phones and down */
  @media (max-width: 480px) {
   .nav-collapse .nav > li.divider {
   *width: 100%;
   height: 1px;
   margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
  }
  }
于 2013-02-20T05:51:16.773 に答える
3

なぜ<hr>ですか<legend></legend>？

<li class = ""></li>
<li class = ""></li>
<div class = "visible-phone">
<legend></legend>
</div>
<li class = ""></li>
<li class = ""></li>
于 2013-09-12T12:42:04.997 に答える