Как использовать nav-pill с nav-justified из bootstrap3x без адаптивных функций

Question

Я действительно хочу реализовать это в своем проекте :

<div class="container">
        <ul class="nav nav-pills nav-justified">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
      </div>
</div>

Однако у меня есть одно требование, и оно заключается в том, чтобы исключить адаптивные функции.Если быть более точным - для предотвращения вертикального укладки, когда экран становится меньше.

Вчера я потратил целый день на поиски способов заработать Bootstrap 3 не реагирует.Я попытался создать свой пользовательский css-файл, переопределяющий нужные мне функции, но поскольку я только начинаю копаться в CSS, мне кажется очень сложным, а на данный момент - невозможным изменить вручную все, что нужно изменить.Я попробовал использовать компилятор на официальном сайте и добился некоторого успеха, но все же остались некоторые адаптивные функции (например, классы, используемые в форме, все еще приводили к сворачиванию элементов).Затем я попробовал работу басджобсена из здесь и это было довольно близко, но в конце концов, когда я поговорил сегодня со своим боссом, мы решили, что тоже сократим текучесть и будем придерживаться определенной ширины.Итак, я возвращаюсь на официальный сайт, где есть раздел, описывающий, как убрать отзывчивость, который вы можете прочитать здесь но проблема в том, что предложение и пример, приведенные для этого предложения, являются лишь частичным решением.Для одного моего nav-pills по-прежнему сворачивается после достижения определенной ширины.Я скачал и включил не отвечающий на запросы css-файл, который был в проекте examples, так что проблема не в этом.Как я вижу, нужно изменять каждый класс вручную, и нет простого способа сделать bootstrap 3 только для устройств hi-res (поправьте меня, если я ошибаюсь, пожалуйста).

Мне жаль, что я не могу предоставить больше кода, я предпринял много попыток, но я не думаю, что они могли бы как-то помочь.Если у кого-то была такая же проблема и у него есть решение для этого, мы будем очень признательны.Я планирую отказаться от bootstrap и просто от чистого кода CSS / jQuery, но мне действительно нравится эта функция, и я хочу добавить ее в свой дизайн, прежде чем продолжить.

Answer 1

Привет, в этом конкретном меню вы можете сделать это :

• Один из них удаляет класс nav-justified это удаляет адаптивные стили.

• Во-вторых, сделайте свой контейнер с вашим фиксированным width.

  .container {
    width:800px;
  }
  

Посмотрите эту демонстрацию http://jsfiddle.net/52VtD/561/.

Наконец, если вы используете bootstrap только для визуальной темы, я не думаю, что это лучший способ.

Чтобы сохранить стили nav-justified вы можете отследить это и поместить в другой класс:

.nav-pills li {
  float:none;
  display:table-cell;
  width:1%;
  text-align:center;
}

Демо-версия http://jsfiddle.net/52VtD/566/

Редактировать

Логика здесь ...>

Я удаляю класс nav-justified потому что это последнее, что перезаписывает стили на ul и, вероятно, является вызываемым классом по media queries.Таким образом, удалив это, вы избегаете объявления медиа-запросов и не меняете позиции или дисплеи для адаптивного интерфейса.

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

Если вы поищете здесь http://getbootstrap.com/dist/css/bootstrap.css ну, вы можете найти, какой класс вызывается объявлением media queries.