Пользовательская высота Навигатор загрузки

Я хочу заголовок с высотой 150 пикселей, содержащий навигационную панель. Navbar должен быть вертикально центрирован в заголовке.Пользовательская высота Навигатор загрузки

HTML:

<header> 
    <div class="navbar navbar-static-top"> 
     <div class="navbar-inner"> 
      <div class="container" style="background:yellow;"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-th-list"></span> 
       </a> 
       <a href="/"><img src="img/logo.png" class="logo" /></a> 
       <nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">   
        <ul class="nav" style="display:inline-block;"> 
         <li><a href="">Portfolio</a></li> 
         <li><a href="">Blog</a></li> 
         <li><a href="">Contact</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 
</header>

CSS:

header { 
    width: 100%; 
    line-height: 150px; 
    color:red; 
    height: 150px; 

    .navbar-inner { 
     border:0; 
     border-radius: 0; 
     background: blue; 
     padding:0; 
     margin:0; 
     height: inherit; 
    } 
}

Навигационный/меню/вертикальный список теперь в правом верхнем углу страницы. Как заставить его центрировать по вертикали? bootstrap.css нестандартно.

источник

2013-11-07 yoeriboven

110

разметка была немного перепутались. Вот стили, нужные и надлежащего HTML

CSS:

.navbar-brand, 
.navbar-nav li a { 
    line-height: 150px; 
    height: 150px; 
    padding-top: 0; 
}

HTML:

<nav class="navbar navbar-default"> 
    <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.png" /></a> 
    </div> 

    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="">Portfolio</a></li> 
      <li><a href="">Blog</a></li> 
      <li><a href="">Contact</a></li> 
     </ul> 
    </div> 
</nav>

Или проверить скрипку на: http://jsfiddle.net/TP5V8/1/

источник

2013-11-07 23:40:20

Спасибо! Это работает, но с этим кодом возникает новая проблема: когда я сжимаю свое окно, navbar превращается в кнопку. К сожалению, ничего не происходит, когда я нажимаю кнопку. Есть идеи по этому поводу? – yoeriboven

Nevermind. Это работало. – yoeriboven

Да, это просто сворачивающийся bootstrap nav, просто удалите тег кнопки вложенный код, если вы не хотите этого эффекта –

Я считаю, что вы используете Bootstrap 3. Если это так, пожалуйста, попробуйте этот код, вот bootply

<header> 
    <div class="navbar navbar-static-top navbar-default"> 
     <div class="navbar-header"> 
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="glyphicon glyphicon-th-list"></span> 
      </a> 
     </div> 
     <div class="container" style="background:yellow;"> 
      <a href="/"> 
       <img src="img/logo.png" class="logo img-responsive"> 
      </a> 

      <nav class="navbar-collapse collapse pull-right" style="line-height:150px; height:150px;"> 
       <ul class="nav navbar-nav" style="display:inline-block;"> 
        <li><a href="">Portfolio</a></li> 
        <li><a href="">Blog</a></li> 
        <li><a href="">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</header>

источник

2013-11-07 17:11:14

Нет, это не так. Таким образом, логотип находится в верхнем левом углу, а меню находится внизу справа. – yoeriboven

Вам нужно также комплект .min-height: 0px; см. ниже:

.navbar-inner { 
    min-height: 0px; 
} 

.navbar-brand, 
.navbar-nav li a { 
    line-height: 150px; 
    height: 150px; 
    padding-top: 0; 
}

Если вы установили .min-height: 0px;, тогда вы можете выбрать любую высоту!

Удачи!

источник

2014-04-11 13:30:18

Для Bootstrap 4 теперь есть spacing utilities, поэтому легче изменить высоту с помощью прокладки на навигационных ссылках. Это можно оперативно применять только при определенных контрольных точках (то есть: py-md-3). Например, на больших (md) экранах этот nav имеет высоту 120px, а затем сменяется до нормальной высоты для меню для мобильных устройств. Никаких дополнительных CSS не требуется ..

<nav class="navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    <div class="navbar-collapse collapse" id="navbarNav"> 
     <ul class="navbar-nav"> 
      <li class="nav-item py-md-3"><a href="#" class="nav-link">Home</a></li> 
      <li class="nav-item py-md-3"><a href="#" class="nav-link">Link</a></li> 
      <li class="nav-item py-md-3"><a href="#" class="nav-link">Link</a></li> 
      <li class="nav-item py-md-3"><a href="#" class="nav-link">More</a></li> 
      <li class="nav-item py-md-3"><a href="#" class="nav-link">Options</a></li> 
     </ul> 
    </div> 
</nav>

Bootstrap 4 Navbar Height Demo

источник

2017-02-13 13:29:21 ZimSystem

Пользовательская высота Навигатор загрузки

ответ

Смежные вопросы