Как выровнять меню по центру, bootstrap 3

@Alexxosipov · Регистрация: 04.12.2016

Студворк — интернет-сервис помощи студентам

Всем привет. Возникла такая ситуация: добавил меню через .navbar-nav, в стилях добавил выравнивание по центру:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <nav id="navigation" role="navigation" class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container-fluid">
            <div class="navbar-header">        
                 
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"> 
                <img src="img/logo_white.png" class="img-responsive" alt="">
                </a>                   
            </div>         
           
            
          <!-- Collection of nav links, forms, and other content for toggling -->  
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
              <ul class="nav navbar-nav"> 
               <li><a href="#">Главная</a></li>
                <li><a href="#">Каталог</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Отзывы</a></li>
                <li><a href="#">Контакты</a></li>  
               </ul>
            </div>  
            </div>        
         </nav>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.navbar-default {
                .navbar-toggle {
                background-color: transparent;
                border: none;
                .icon-bar {
                    background-color: rgba(252,199,239,1);
                }  
            }
            .navbar-collapse { 
                border-top: none;                   
                }
            background-color: transparent;
            border: none;
            .navbar-nav {
                float:none;
                margin:0 auto;
                display: block;
                text-align: center;           
                li {
                    display: inline-block;
                    float: none;
                    a {
                        color: white;
                        &:hover {
                            color: rgba(252,199,239,1);
                        }
                    }
                }
            }
        }

Проблема заключается в том, что я не могу никак выровнять меню по центру страницы, а не блока, поскольку ширина блока .navbar-nav зависит от .navbar-header, где лежит логотип. Итог - смещение всего меню. Подскажите, пожалуйста, как это пофиксить?

@Berzeg · 07.01.2017, 14:44

Не вижу стилей нав бар хедер, блоку с логотипом задана какая та ширина? Ты для ul прописал маржин 0 авто, это свойство работает только при условии, что задана фиксированная ширина блока. Есть ссылка на сайт? Или скинь архив, я посмотрю

@Alexxosipov · 07.01.2017, 21:10 **[ТС]**

Berzeg, решил проблему, обернув все в div'ы col-md-2 col-md-8 col-md-2, но не уверен, что это правильно. Интересно, какое тут еще есть решение, поэтому буду рад ответу) архив с сайтом приложил

@Berzeg · 09.01.2017, 09:21

Почему не уверен) ты в типичной форме заюзал сетку бутстрапа, по другому это будут флоуты с шириной блоков в % или table cell

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@Berzeg 0 / 0 / 0 Регистрация: 28.12.2016 Сообщений: 18
	07.01.2017, 14:44
	Не вижу стилей нав бар хедер, блоку с логотипом задана какая та ширина? Ты для ul прописал маржин 0 авто, это свойство работает только при условии, что задана фиксированная ширина блока. Есть ссылка на сайт? Или скинь архив, я посмотрю 0

@Berzeg 0 / 0 / 0 Регистрация: 28.12.2016 Сообщений: 18
	09.01.2017, 09:21
	Почему не уверен) ты в типичной форме заюзал сетку бутстрапа, по другому это будут флоуты с шириной блоков в % или table cell 0