Как изменить ширину навигатора/контейнера? Бутстрап 3

Ширина по умолчанию для моего навигатора слишком широка 1170px. Я хотел бы уменьшить его до 940px, но я хочу сохранить отзывчивость.

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

Является ли это правильным свойством или есть что-то еще?

@media (min-width: 1200px) {
  .container {
  max-width: 1170px;
}

Вот мой код навигатора

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>
          <a class="navbar-brand" href="#">Site Name</a>
        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#shop">Shop</a></li>
            <li><a href="#showcase">Showcase</a></li>
            <li><a href="#help">Help</a></li>
            <li><a href="#my account">My Account</a></li>
            <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div>

Ответы

Ответ 1

Я сам решил эту проблему. Вы были на правильном пути.

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

Здесь мы говорим: на видовых экранах 1200 пикселей или больше - установите максимальную ширину контейнера до 970 пикселей. Это перезапишет стандартный класс, который в настоящее время устанавливает максимальную ширину до 1170 пикселей для этого диапазона.

ПРИМЕЧАНИЕ. Убедитесь, что вы добавили это ПОСЛЕ загрузки bootstrap.css(каждый сделал эту небольшую ошибку в прошлом).

Надеюсь, это поможет... удачи!

Ответ 2

Ширина контейнера упадет до 940 пикселей для видовых экранов размером менее 992 пикселей. Если вам действительно не нужны контейнеры размером более 940 пикселей, перейдите на страницу Bootstrap customize и установите @container-lg-desktop в @container-desktop или жестко закодированный 940px.

Ответ 3

Привет, это работает! в вашем случае .navbar-fixed-top {}

.navbar-fixed-bottom{
    width:1200px;
    left:20%;
}

Ответ 4

При использовании .navbar-static-top сила navbar становится полной. Удалите этот класс, и вы получите изменяемый размер navbar. Затем вы можете обернуть его в span# нужного размера.

<div class="container">
<div class="row">
    <div class="span6 offset3">
        <div class="navbar">
            ...
        </div>
    </div>
</div>

Ответ 5

Правильный способ сделать это - изменить ширину онлайн-адаптера здесь:

http://getbootstrap.com/customize/

загрузите повторно скомпилированный источник, перезапишите существующий дистрибутив загрузочного диска и перезагрузите (помните кеш браузера!!!)

Все ваши изменения будут сохранены в файле конфигурации .json

Чтобы снова применить все изменения, просто загрузите json файл, и вы готовы пойти

Ответ 6

Если вы имеете дело с более динамическим разрешением/размерами экрана, вместо жесткого кодирования размера в пикселях вы можете изменить ширину в процентах от ширины носителя как таковой

@media (min-width: 1200px) {
    .container{
        max-width: 70%;
   }
}

Ответ 7

просто:

.navbar{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

или,

.navbar.navbar-fixed-top{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

Надеюсь, что это сработает (по крайней мере, для будущих поисковиков)