Создайте адаптивные вкладки с помощью Bootstrap (они должны автоматически складываться на меньших экранах)

Как создать настраиваемые вкладки, которые автоматически складываются с помощью бутстрапа. Код для моих навигаторов -

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

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

Ответ 1

Это должно работать:

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

Ответ 2

С версией BootStrap 3 у вас есть все, что укладывается в чистый вертикальный путь для Extra Small Device, добавив 4 класса CSS. BootStrap и вкладка не отображаются так сильно, как вы заметили. Код ниже может выполнить задание, удалив все фон и границу.

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

Ответ 3

Если вы обнаружите, что 480 не делает этого (у меня есть длинные названия вкладок), вы всегда можете изменить максимальную ширину. Я использовал:

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

и он работает как шарм.

Ответ 4

Если вы используете поддержку SCSS или LESS, вы должны использовать правильные медиа-запросы vars:

В SCSS:

  @media (max-width: $screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

В Менее:

  @media (max-width: @screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

Отметьте http://getbootstrap.com/css/ для получения подробной информации о возможных варах.

Ответ 5

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

Этот более простой и красивый.

Ответ 6

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