Как сделать содержимое навигатора той же высотой, что и Navbar?

Я использую загрузку Twitter и пытаюсь настроить Navbar.Как сделать содержимое навигатора той же высотой, что и Navbar?

У меня есть JSFiddle here. Высота Navbar составляет 75 пикселей, но высота содержимого не изменяется.

Вот мой HTML в полном комплекте:

<!DOCTYPE html> 

<html> 

<head> 
<link href="dist/css/bootstrap.css" rel="stylesheet"> 
</head> 

<body> 

<div class="container"> 
    <div class="row"> 
     <div> 
      <h4>Navbar</h4> 

      <div class="navbar navbar-default"> 
       <div> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li ><a href="#">About</a></li> 
         <li ><a href="#">Products</a></li> 
         <li ><a href="#">Services</a></li> 
         <li ><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

</body> 

</html>

Как вы можете видеть, только CSS файл я использую bootstrap.css который я скачал с сайта Twitter Bootstrap (с помощью Скачать Bootstrap кнопку) , Единственное изменение, которое я сделал это:

.navbar { 
    position: relative; 
    /* Old min height 
    min-height: 50px; 
    */ 
    min-height: 75px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
}

Я попытался изменить высоту Navbar-умолчанию, нав и NavBar-Nav, ничего не работает!

Что нужно изменить в bootstrap.css, чтобы содержимое Navbars соответствовало высоте самого Navbar?

источник

2014-01-18 JMK

Вы можете использовать line-height или padding, чтобы содержимое заполнило высоту элемента.

, например:

.navbar .navbar-nav > li > a { 
    line-height: 45px; 
}

http://jsfiddle.net/GH9mV/3/

Или:

.navbar .navbar-nav > li > a { 
    padding: 27px 15px; 
}

http://jsfiddle.net/GH9mV/5/

Оба из них будет делать трюк, хотя line-height является простым вариантом для управления и меры, поэтому я бы рекомендовать его.

Обратите внимание, что я использовал довольно специфический селектор. Это потому, что line-height и padding уже установлены на этих элементах в bootstrap css, а не на суммы, которые вам нужны. Специфика моего селектора позволяет мне переопределять эти стили, или вы также можете отследить их и отредактировать их в bootstrap css.

источник

2014-01-18 19:07:08

Для того чтобы изменить высоту содержимого .navbar, вам необходимо увеличить высоту над метками привязки.

Добавьте следующее в своих декларациях CSS:

@media (min-width: 768px) { 
    .navbar-nav > li > a { 
    padding-top : 0; 
    padding-bottom : 0; 
    height  : 75px; 
    line-height : 75px; /* align the line center vertically */ 
    } 
}

Я использовал @media запрос только применить эти декларации CSS на более высоких разрешениях.

Вот Working Demo.

источник

2014-01-18 19:08:08

Линейная высота якорных меток - это то, что контролирует высоту навигатора, а не минимальную высоту окружающего div.По умолчанию, Bootstrap имеет следующую установку:

.navbar-nav > li > a { 
    line-height: 20px; 
}

изменить его на это, например:

.navbar-nav > li > a { 
    line-height: 45px; 
}

... и не забудьте удалить переделки мин высоты.

Якорные метки, между прочим, имеют верхнее и нижнее поля, которые уже установлены на 15 пикселей каждый. Вот почему вы хотите установить высоту линии 45px вместо 75px. 45 + 15 + 15 = 75.

источник

2014-01-18 19:17:30

Я также добавлю, что отличный способ узнать, какие элементы заполняют какое пространство на странице, это щелкнуть правой кнопкой мыши по элементу в Firefox или Chrome и выбрать «Inspect Element »(или« Проверить элемент с помощью Firebug », если у вас это установлено). В появившейся области инструмента разработчика вы можете навести указатель мыши на HTML на вкладке HTML и увидеть выделенную область на странице, отображающую пробел и поля, которые занимают тег элемента, который вы висите. В вашем случае, например, подсветка элементов div, ul и li заполняла полный навигатор, но элементы привязки не выполнялись. –

Как сделать содержимое навигатора той же высотой, что и Navbar?

ответ

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