bootstrap3导航栏高度(宽度)调节

最近在用bootstrap做一个网页的导航栏时,导航栏总是看上去很宽(很胖),像这样:

然而想要达到的效果是这样:

于是各种调样式,最后终于解决。

两个注意点:

1、bootstrap3导航栏有个最小的高度限制(应该是50px),要使用min-height把它改小。

2、只需要调节navbar的最小高度,navbar-nav的a(有brand再加上brand)的高度。

CSS代码:

.navbar-nav > li > a{
    padding-top:4px ; 
    padding-bottom:0 ;
    height: 28px;
}
.navbar {min-height:20px ;}

其中,‘>’是子元素选择器,表示只能选择某元素的子元素。这里是选择.navbar-nav的子元素li,然后选择li的子元素a,这样就定位到了a元素。padding-top是元素的上内边距,padding-bottom是元素下内边距,height是高度。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值