Выравниваем div по-центру другого div в меню Bootstrap

Выравниваем div по-центру другого div в меню Bootstrap По-умолчанию navbar показывает пункты меню с выравниванием по левому краю. Но обычно там же в левом углу у людей есть логотип сайта. И иногда меню очень хочется отстранить по-правее от логотипа. Вот как просто это сделать.

выравнивание меню поцентру в navbar в Bootstrap

Добавляем в navbar новый класс navbar-center

<nav class="navbar navbar-default" role="navigation">
    <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>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Left</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-center">
            <li><a href="#">Center 1</a></li>
            <li><a href="#">Center 2</a></li>
            <li><a href="#">Center 3</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right</a></li>
        </ul>
    </div>
</nav>

И в файл стилей добавляем

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

 

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.