Как изменить размер панели навигации в Twitter Bootstrap 3

Я пытаюсь увеличить высоту панели навигации bootstrap 3.0, которая используется с фиксированным верхним поведением.

Как мне это сделать?


person Fernando    schedule 24.11.2016    source источник
comment
Возможный дубликат Bootstrap 3 - высота панели навигации   -  person Ali Gajani    schedule 24.11.2016


Ответы (2)


Не видя вашего кода, трудно помочь, но в Bootstrap 3 обычно,

Это переменная less, @navber-height и @navbar-padding-vertical будут регулировать высоту панели навигации.

Но в моем текущем приложении Bootstrap я настроил его по-другому, используя

header.navbar {
    height: 54px;
}

Проще всего сделать inspect element на панели навигации, а затем посмотреть на css, чтобы увидеть, где находится значение height. Отрегулируйте его до нужного height.

Затем создайте правило в своем css с !important, чтобы переопределить существующее Bootstrap css.

Это еще один пример без less.

.navbar-fixed-top {
    height: 70px !important; /* Whatever you want. */
}

Создайте новый файл css и поместите в него свои переопределения.

<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>

внутри overrides.css

Если это правило css существует внутри Bootstrap, когда вы проверяете элемент, переопределите его в файле css переопределений, который вы добавили сейчас.

не забудьте использовать !important

.navbar-fixed-top {
    height: 70px !important; /* Whatever you want. */
}
person wuno    schedule 24.11.2016
comment
ведьма css я должен редактировать в папке My Bootstrap css? - person Fernando; 24.11.2016
comment
Я создаю новый файл css. Поместите его под загрузочный файл css в заголовке вашего документа. Таким образом, все, что вы переопределите, обязательно останется! Я обновил свой ответ, чтобы показать вам, что я имею в виду. Если это поможет вам, пожалуйста, примите. Если нет, пожалуйста, дайте мне знать, почему, и я постараюсь помочь больше. - person wuno; 24.11.2016
comment
@wunu Я не понял твой комментарий. но вы имели в виду, должен ли я изменить файл bootstrap.css .navbar-fixed-top? - person Fernando; 25.11.2016

Если вы используете версию .less или .scss, вы можете изменить следующую переменную $navbar-height в коде:

https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360

Если нет, вам нужно переопределить его правилом, указав:

.navbar {
    height: {new height};
}
person Eric N    schedule 24.11.2016