Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
834 views
in Technique[技术] by (71.8m points)

css - Change navbar height in Bootstrap3

I'm trying to reduce the height of Bootstrap3's fixed navbar. I found the @navbar-height variable in variable. less, and changed it, but it doesn't seem to change anything. I also tries these solutions: "Change navbar height", "Navbar height changing". No result.

Any idea?

Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

update

As per response on https://github.com/twbs/bootstrap/issues/11443 @mdo wrote:

Change the @navbar-height and @navbar-padding-vertical and you should get it.

Example, set @navbar-height: 20px; and @navbar-padding-vertical: 0;, see: http://bootply.com/100604

Note this doesn't set the height of the .navbar-form elements

end update

The navbar itself has no defined width. Cause Bootstrap use the border-box model, the height is set by the highest element inside it.

Notice the navbar will have a min-height (set to 50px the default navbar height). @navbar-height in navbar.less sets this min-height.

also read it's comments:

// Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)

To change the height you will have to change the heights of the inside elements.

.navbar-brand

The .navbar-brand class got a height of 50px. Defined by a padding of 15px + a line-height of 20px;. (2 x 15 + 20 = 50).

The line-height is set in navbar.less too by @line-height-computed. With @line-height-computed defined in variables.less as floor(@font-size-base * @line-height-base); // ~20px

@line-height-computed will also used in forms, navigation, etc. so changing it and recompile Bootstrap will not only effect your navbar.

The above make it impossible to set your navbar height with Less.

The padding is defined by navbar-padding-vertical but this variables is NOT used for setting the padding of the navbar links (.navbar-nav > li > a)

Use css to manipulate the line-height (so font-size) and padding of .navbar-brand to change its height and so the height of the navbar.

.navbar-nav > li > a

The .navbar-nav > li > a class, the links in your navbar also defines a height of 50px (padding of 15 bottom/top) and a line-height of 20x again. Note the padding is first set to 10px hard code in navbar.less and overwritten by ((@navbar-height - @line-height-computed) / 2) (higher precedence) for @media (min-width: @grid-float-breakpoint)

Also in this case the line-height of the links will be set by @line-height-computed.

Other elements

Also element like forms, dropdown will have a calculated height.

Overall it seems you will have to use css for the different elements of your fixed navbar to sets it's height.

See also: https://github.com/twbs/bootstrap/issues/11443 and https://github.com/twbs/bootstrap/issues/11444


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...