Удалите ненужные прокладки внизу загрузочного статического навигатора

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

https://jsfiddle.net/2fax4vme/

Примечание три .rhombus дивы. Они должны быть полной высотой навигационной панели, но под ними имеется 5 пикселей дополнительного пространства. Если я сделаю divobus divbus на 5 пикселей выше, навигационная панель просто растянется.

Я уверен, что это что-то просто, я не пропущу, но я просто не могу это заметить.

источник

2015-03-22 Joseph

Что касается изменения высоты .rhombus по height:50px;. Меня устраивает.

Для HTML5 также необходимо добавить margin-bottom:-5px за Pevara.

источник

2015-03-22 00:30:09 Grokify

https://jsfiddle.net/gcdwdtLu/ Это не работает. Наббар становится 55px высотой. – Joseph

Я разместил здесь версию, которая работает: http://grokify.github.io/examples/so_29189619.html. Дивы .rhombus становятся выше, не растягивая навигатор. Может ли что-то еще быть проблемой? – Grokify

Знаете ли вы, почему он работает в вашей ссылке, но не jsFiddle? Код выглядит одинаково. Я попытался установить «height: 50px» на моей странице, и я получаю тот же эффект, что и в jsFiddle, навигационная панель просто расширяется. – Joseph

Я бы не пробовал и не редактировал загрузку navbar css. Вместо, почему не просто противостоять отступы, добавив отрицательную маржу дна к вашему ромба (и добавить дополнительные несколько пикселей в высоту)

 .rhombus{ 
      height:50px; /* + 5px */ 
      width: 35px; 
      -webkit-transform: skew(-20deg); 
      -moz-transform: skew(-20deg); 
      -o-transform: skew(-20deg); 
      display: inline-block; 
      margin:0px; 
      padding:0px; 
      margin-bottom: -5px; /* counter the padding */ 
     }

и обновленный скрипку: https://jsfiddle.net/2fax4vme/2/

источник

2015-03-22 00:45:58 Pevara

Это решает мою проблему, но я был бы признателен, если бы вы могли объяснить, что на самом деле происходит здесь, спасибо! – Joseph

взгляните на этот ответ для объяснения отрицательных полей: http://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top- 5-margin-bottom5 – Pevara

Я просто не понимаю, почему это нужно использовать здесь. Какая часть CSS заставляет навигатор расширяться, когда его содержимое становится выше? – Joseph

Испытано : https://jsfiddle.net/2fax4vme/3/

.rhombus { 
    height: 50px; 
} 
#navbar { 
    line-height: 0; 
}

Я нашел есть несколько элементов, установленных на 50px в Bootstrap, так что, вероятно, также сделать ваше к тому же высота хороший план, чтобы избежать изменения значений этих по умолчанию.

источник

2015-03-22 01:31:25 Stickers

Удалите ненужные прокладки внизу загрузочного статического навигатора

ответ

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