Как отключить штабелирование загрузочных вкладок на небольших экранах

Я видел этот пост, но, будучи новым пользователем, я не могу комментировать, чтобы попросить разъяснения.

Я использую оправданные вкладки nav в Bootstrap и не хочу, чтобы они складывались на небольших экранах, так как у меня есть только две вкладки. Я бы хотел, чтобы они оставались бок о бок, просто сжимались, чтобы соответствовать экрану. Это то, что у меня есть:

    <!-- 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;}
}

Я не уверен, что я делаю неправильно, поэтому любая помощь очень ценится.

Ответы

Ответ 1

Попробуйте добавить 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

Ответ 2

Проблема с некоторыми другими решениями заключается в том, что вкладки потеряют свои границы и другие элементы дизайна. Следующие медиа-запросы обеспечивают более полное соответствие вкладок как на конденсированных, так и на более широких экранах:

@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;
  }
}

Ответ 3

Существует очень простой способ предотвратить стекирование:

CSS:

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

Я искал это и был раздражен ответами, связанными с настраиваемым бутстрапом (я использую CDN), и LESS (который я не использую)

Это отлично работает для меня...

Ответ 4

Я попытался отредактировать ответ @pjb, поскольку он неполный. Но мое редактирование было отклонено дважды, поскольку, по-видимому, оно "неверно". Хотя плункер, как правило, не согласен...

Это оригинал, который показывает, что нижняя граница активных вкладок отображается при конденсировании

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;
  }
}

Ответ 5

В дополнение к ответу на james, если вы не хотите ограничивать максимальную ширину до 768 пикселей, вы можете сделать:

@media (min-width: 0px) {

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

}

Должен ли я избегать использования! важно в CSS?

Если вы предпочитаете не использовать !important в CSS, вставьте код после включения bootstrap.

Ответ 6

Многое зависит от того, хотите ли вы сохранить неповрежденную загрузку по умолчанию и просто добавить свою собственную тему вверху. В большинстве случаев это имеет смысл, так как вы можете захотеть укладывать вкладки для мобильных устройств позже на дорожке, если список вкладок растет до 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;
}

Ответ 7

И отредактируйте ответ pjb, даже сохраните стиль по умолчанию для бутстрапа, оправданного 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;
  }

}

Ответ 8

Другим простым решением является добавление класса 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. Идите вперед и используйте row wrap на экране Fiddle и resize, чтобы узнать, о чем я говорю.

Ответ 9

МЕНЬШЕ - Bootstrap

Это ответ @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;
      }
    }
  }
}