18

ブートストラップを使用して自動的にスタックされるレスポンシブ タブを作成するにはどうすればよいですか。私のナビのコードは -

<div>
    <ul id="tabslist_navs" class="nav nav-tabs">
        <li><a href="#">Normal</a></li>
        <li><a href="#">Hover</a></li>
        <li><a href="#">Selected</a></li>
    </ul>
    <div class="tab-content">
        ....
    </div>
</div>

小さな画面で表示したときに、スタックされたタブに変換する必要があります。今のところ、タブを複数のいいねに移動するだけで、見栄えが悪くなります。ナビゲーションバーの折りたたみのようなものが必要ですが、折りたたみを有効にするボタンはありません。

4

6 に答える 6

39

これはうまくいくはずです：

@media (max-width: 480px) { 
    .nav-tabs > li {
        float:none;
    }
}
于 2012-12-15T15:51:26.850 に答える
18

BootStrap バージョン3では、4 つの CSS クラスを追加することで、Extra Small Device 用にすべてをきれいに垂直方向に積み重ねることができます。お気づきのように、BootStrap と Tabは大きくレンダリングされません。以下のコードは、すべての背景と境界線を削除することでジョブを実行できます。

@media (max-width: 767px) { 
    .nav-tabs > li {
        float:none;
        border:1px solid #dddddd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .nav > li > a:hover, .nav > li > a:focus,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
     {
        background:none;
        border:none;
    }
}
于 2014-03-22T23:53:29.783 に答える
4

480 ではうまくいかない場合 (私は長いタブ タイトルを持っています)、いつでも最大幅を変更できます。私が使用した：

@media (max-width: 991px) { 
 .nav-tabs > li {
    float:none;
 }
}

そしてそれは魅力のように機能します。

于 2014-04-29T19:23:07.817 に答える
2 
    @media (max-width: 480px) {
        .nav-tabs > li {
            float:none;
            margin-bottom: 0px;
        }
        .nav-tabs > li.active > a {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li.active > a:hover {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li  > a {
            border-bottom: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
        .nav-tabs > li > a:hover {
            border-color: #dddddd;
        }
    }

こっちの方がシンプルでカッコいい。

于 2016-08-04T20:04:49.990 に答える
0

私の意見では、ここでの他の解決策にはまだ多くのことが望まれています。これは、以前のソリューションに基づいて構築されていますが、CSS flexbox を使用するソリューションです。タブは可能な限り横に並び、必要な場合にのみ複数行に折り返され、画面の幅いっぱいに表示され、水平方向のスペースは均等に配分されます。すっきりとバランスが取れており、長いタブや多数のタブを処理するために適切にスケーリングされます. また、他のソリューションのいくつかの境界および境界半径の問題も解決します。

SCSS:

@media (max-width: $screen-xs-max) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
    > li {
      flex: auto;
      text-align: center;
      border: 1px solid $nav-tabs-border-color;
      margin-right: -1px;
      > a {
        margin: 0;
      }
      &.active {
        background: $gray-lighter;
        > a, > a:hover, > a:focus {
          border: none;
          background: none;
        }
      }
    }
  }
}

または、プレーン CSS:

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
  }
  .nav-tabs > li {
    flex: auto;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: -1px;
  }
  .nav-tabs > li > a {
    margin: 0;
  }
  .nav-tabs > li.active {
    background: #eee;
  }
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    background: none;
  }
}
于 2016-12-07T20:00:16.173 に答える