Bootstrap "navbar-brand", вызывающий элементы "navbar-nav", чтобы сдвинуть право от центрированного положения в панели навигации?

Question

Я пытаюсь создать навигационную панель с «маркой» (LOGO) с левой стороны и фактическими элементами навигации в центре всей панели. Я использую стандартную навигационную панель Bootstrap, поскольку я только начал изучать веб-разработку неделю назад. Это то, что он выглядит так далеко:

Однако, вы можете увидеть элементы навигации слегка сдвинуты вправо от фактического центра страницы (рубрика «Это домашняя страница.» точно в центре страницы). Вот часть моего кода, что я считаю, может быть уместным:

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container-fluid { 
 
    background-color: white; 
 
    border: none; 
 
    box-shadow: none; 
 
} 
 
.content { 
 
    padding-top: 65px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.navbar .navbar-collapse { 
 
    text-align: center; 
 
    background-color: cyan; 
 
} 
 
.navbar .navbar-nav { 
 
    margin: 1%; 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: center; 
 
    text-decoration: bold; 
 
    text-align: center; 
 
} 
 
.navbar-default { 
 
    background-color: white; 
 
    box-shadow: none; 
 
    text-align: center; 
 
} 
 
.navbar-header { 
 
    margin: 1%; 
 
}

<!-- Navigation bar --> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <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="index.html" id="logo">LOGO</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
</div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Я с подозрением на «NavBar-бренд», как это кажется, мешает каким-то образом, когда я пытаюсь изменить текст -align для «.navbar .navbar-collapse» (цветной голубой для простоты форматирования), который я настроил на «центр», как предложили другие ответы на StackOverflow.

Например, при изменении выравнивания текста на "левый":

.navbar .navbar-collapse { 
 
    text-align: left; 
 
    background-color: cyan; 
 
}

навигационная панель выглядит следующим образом:

Изменение выравнивания текста как и ожидалось, «справа» перемещает навигационные элементы вплоть до правой стороны голубого бара.

Таким образом, похоже, что элементы навигации центрируются между «навигационной маркой» и правой стороной панели, а не между фактическими левыми и правыми сторонами всего бара.

Есть ли у кого-нибудь какие-либо предложения о том, как сделать мои навигационные элементы точно центрированными на всей панели, чтобы они соответствовали заголовку «Это страница HOME». и не сдвигается вправо?

Answer 1

Существует несколько разных способов сделать это, и я думаю, это зависит от того, что вы собираетесь делать дальше по дорожке, но самая легкая вещь - это, вероятно, взять .navbar-brand из документа поток, так что .navbar-nav игнорирует его при центрировании.

Вы можете сделать это довольно легко, добавляя что-то вроде этого:

.navbar-brand { 
    position: absolute; 
} 

Вы можете проверить его здесь: http://codepen.io/anon/pen/PNMBQx

Надежда, что помогает, и удачи!