Как центрировать "btn-group btn-group-jusised" в мобильном окне просмотра с помощью Bootstrap 3.0

Question

Я добавил стопку в верхнюю часть нижнего колонтитула, чтобы выделить группу общих ссылок сайта. Я строю этот сайт с темой Concrete5 CMS, основанной на Bootstrap 3.0

Я создал bootply на http://bootply.com/102065

Я использовал класс "btn-group btn-justified" из Bootstrap, чтобы группа кнопок растягивалась с одинаковым размером и охватывала всю ширину родительского элемента.

Я также использовал <a> Элемент для этого раздела посоветовал в документации по начальной загрузке.

Все выглядит отлично, за исключением случаев, когда я просматриваю ссылки сайта нижнего колонтитула на мобильном устройстве. (См. Снимок экрана ниже). Кнопки не масштабируются, чтобы соответствовать области просмотра. Выпрыгнуть из контейнера и наложить на следующую кнопку. Я включил скриншот.

Мне бы хотелось, чтобы кнопки в группе btn либо располагались друг над другом, либо правильно масштабировались.

Я предполагаю, что мне нужно будет добавить медиа-запрос к моей CSS, чтобы специально предназначаться для мобильных устройств для этого раздела Пример. @media (max-width: @screen-xs-max) { ... }

Можно ли заставить компонент "btn-group btn-justered" по-разному масштабироваться на.col-xs?

Answer 1

"Btn-group btn-group-jusised" не ломается для мобильных устройств. То, что вы ищете, это обоснованная навигация, показанная здесь:

http://getbootstrap.com/examples/justified-nav/

    <ul class="nav 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>
    </ul>

Это может быть проще, если вы перевернете навигацию, оправданную навигацией, это может быть слишком много. Вот что-то: http://jsbin.com/ehaRIQA/1/edit & http://jsbin.com/ehaRIQA/1/