Bootstrap Центрирование всей панели навигации

Итак, я гуглил и пытался решить эту проблему в течение последнего часа, и я начинаю немного расстраиваться.

Мне нужна эта панель навигации (в настоящее время все ее содержимое находится слева): панель навигации слева

чтобы все его содержимое было центрировано, чтобы выглядеть так (сделано в краске, лол):

Единственные решения, которые я когда-либо находил для этого, — это либо центрирование навигационных ссылок без бренда, либо центрирование бренда без навигационных ссылок.

HTML:

    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header ">
        <a class="navbar-brand" href="#">SOUND HAUS</a>
        <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">
            <li><a href="/articles" style="color:#fff;">ARTICLES</a></li>
            <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li>
            <li><a href="/gallery" style="color:#fff;">GALLERY</a></li>
            <li><a href="/contact" style="color:#c00618;">CONTACT</a></li>
        </ul>
    </div>
</nav>

CSS:

.navbar {
    font-family: Long Shot;
    background-color: black;
    z-index: 998;
}

.navbar-brand {
    font-size: 50px;
    margin-top: 20px;
    color: white !important;
}

.navbar-nav {
    margin-top: 20px;
    font-size: 20px;
}

Заранее спасибо!


html css twitter-bootstrap navbar nav
person Daniel Glynn Goodwin    schedule 22.10.2016    source источник
comment
можете ли вы включить этот html src для этого файла bootstrap css   -  person repzero    schedule 22.10.2016
comment
@repzero Я не уверен, что понимаю, о чем ты спрашиваешь. Извиняюсь.   -  person Daniel Glynn Goodwin    schedule 22.10.2016
comment
Ваши примеры кодов не отражают точно то, что находится на ваших скриншотах. Попробуйте вставить все свои коды из этого вопроса в jsfiddle... видите разницу между скриншотом и вашими кодами?... Я думаю, что ваша html-страница содержит ссылку теги во внешние файлы css для начальной загрузки   -  person repzero    schedule 22.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны поместить контейнер в навигацию, а затем перезаписать и добавить некоторые правила CSS в правила начальной загрузки.

<style>
.container.nav{
  text-align:center
}
.navbar {
    font-family: Long Shot;
    background-color: black;
    z-index: 998;
}

@media (min-width: 768px){
.navbar-header{
  max-width: 400px;
  display: inline-block;
}

.navbar-header {
     float: none;
  }

}

@media (min-width: 768px){
.navbar-collapse.collapse{
  max-width: 600px;
  display: inline-block;
}

.navbar-collapse.collapse {
    display: inline-block !important;
  }
}


.navbar-brand {
    font-size: 50px;
    margin-top: 20px;
    color: white !important;
}

</style>


<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container nav">
      <div class="navbar-header ">
          <a class="navbar-brand" href="#">SOUND HAUS</a>
          <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">
              <li><a href="/articles" style="color:#fff;">ARTICLES</a></li>
              <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li>
              <li><a href="/gallery" style="color:#fff;">GALLERY</a></li>
              <li><a href="/contact" style="color:#c00618;">CONTACT</a></li>
          </ul>
      </div>
      </div>
  </nav>

Я добавил только div class="container nav" Затем некоторые правила CSS пришлось изменить для размеров больше 768 пикселей (если осталось меньше). И это скриншот, который я сделал: введите здесь описание изображения

person Nensi601    schedule 22.10.2016
comment
Я мог бы поцеловать тебя. Спасибо большое! - person Daniel Glynn Goodwin; 22.10.2016