web-dev-qa-db-ja.com

小さい画面でbootstrap両端揃えタブのスタックを無効にする方法

この投稿 を見たことがありますが、新しいユーザーであるため、説明を求めるためにコメントすることはできません。

Bootstrapで正当化されたnavタブを使用しています。タブが2つしかないため、小さな画面でスタックしないようにします。画面に合わせてダウンします。これは私が持っているものです：

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

関連する投稿がメディアクエリの使用を示唆しているように、私はそれを機能させることができないようです。私は、小さな画面だけをターゲットにするために次を設定しようとしました：

    @media (max-width: 768px) {
  .nav-justified > li {display: table-cell;}
}

私が何を間違っているのかわかりませんので、どんな助けも大歓迎です。

csstwitter-bootstrapnavbar
33
user2654108

リンクの前にcol-xs-6を追加してみてください

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <div class="col-xs-6">
      <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  </div>    
  <div class="col-xs-6">    
      <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
  </div>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

こちらで確認できます Bootply

6
colinplusplus

他のソリューションのいくつかの問題は、タブの境界線やその他のデザイン要素が失われることです。次のメディアクエリは、圧縮された表示と幅の広い表示の両方でタブがより完全に一致するようにします。

@media (max-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a  {
    border-bottom: 1px solid #ddd !important;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
  }
}
51
pjb

不完全な@pjbの回答を編集しようとしました。しかし、明らかに「間違っている」ため、私の編集は2回拒否されました。配管工は同意しない傾向がありますが...

これは、アクティブなタブの下部の境界線が凝縮時に表示されることを示すオリジナルです

http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview

このバージョンでは、明らかに表示されていません

http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview

@media (max-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a  {
    border-bottom: 1px solid #ddd !important;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff !important;
  }
}
11
james

スタックを防ぐための本当に簡単な方法があります：

CSS：

.nav li {
    display:table-cell !important;
}

私はこれを検索し、カスタムビルドbootstrap（CDNを使用）とLESS（使用しない）を含む回答に悩まされました。

これは私に最適です...

10
mattdlockyer

Max-widthを768pxに制限したくない場合は、jamesの答えに加えて、次のことができます。

@media (min-width: 0px) {

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

}

CSSで！importantの使用を避けるべきですか？

CSSで!importantの使用を避けたい場合は、bootstrapを含めた後にコードを貼り付けてください。

7
RafaSashi

他の簡単な解決策は、flexクラスを<ul>ではなくnav-justified要素に追加することです

.just {
  display: flex;
  flex-flow: row nowrap;
}

.just > li {
  flex: 1 auto;
  text-align: center;
  white-space: nowrap;
}

jsFiddle
タブが多数ある場合、それらの一部が画面の後ろに表示される場合があることに注意してください。これを防ぐには、wrapの代わりにnowrapをflex flowに追加します。そうすれば、実際にスタックされますが、通常は画面の後ろに物が出る場合にのみ、warpスタッキングのブレークポイントはnav-justifiedの場合よりも小さくなります。先に進み、Fiddle）でrow wrapを使用し、画面のサイズを変更して、私が話している内容を確認します。

5
NightKn8

そして、pjbの答えを編集して、bootstrap justified nav-bar。

@media (max-width: 768px){
    .nav-justified > li {
        display: table-cell;
        width: 1%;
  }
    .nav-justified > li > a  {
        border-bottom: 1px solid #ddd !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}
2
Sikhumbuzo Dlamini

多くの場合、デフォルトのbootstrapをそのままにして、カスタムテーマを一番上に追加するかどうかに依存します。多くの場合、モバイル用のタブをスタックする必要があるため、これは理にかなっています。あなたがタブリストが3または4などに成長した場合、トラックの下で私がすることは、ul "custom-not-stacked"に新しいクラスを追加し、このCSSをスタイルシートに追加することです：

.nav-justified.custom-not-stacked>li {
display: table-cell;
width: 1%;
}
.nav-justified.custom-not-stacked>.active>a, 
.nav-justified.custom-not-stacked>.active>a:focus, 
.nav-justified.custom-not-stacked>.active>a:hover {
border-bottom-color: #fff;
}
.nav-justified.custom-not-stacked>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}
2
partypete25

LESS-ブートストラップ

これは、@ pjbがLESSに変換された答えです。現在、bootstrap.lessを使用しているため、以下に実装するスタイルを示します。

@media (max-width: @screen-xs-max) {

  .nav-justified {

    > li {
      display: table-cell;
      width: 1%;

      > a {
        border-bottom: 1px solid @nav-tabs-justified-link-border-color !important;
        border-radius: @border-radius-base @border-radius-base 0 0 !important;
        margin-bottom: 0 !important;
      }
    }
  }
}
0
Adrian Enriquez