自定义Bootstrap 3 & 4 Navbar高度

作者: JCHN | 来源:发表于2018-03-20 23:25 被阅读275次

给navbar加上min-heigh：

.navbar {
    min-height: 0px;
  }

并给 .navbar-brand和 .navbar-nav li a 设置合适的inline和padding的值如下所示：

  .navbar-brand,.navbar-nav li a {
    line-height: 30px;
    height: 30px;
    padding-top: 0;
}

更新与2018年3月31日：
bootstrap 4就不用那么麻烦，直接加css就可以：

nav {
    height:30px;
}

并给<nav>中的<a>加上合适的line-height 。

nav a {
    line-height:30px;
}

自定义Bootstrap 3 & 4 Navbar高度
给navbar加上min-heigh：并给 .navbar-brand和 .navbar-nav li a 设置...
购物网站基础建设复盘
1>添加`gem 'bootstrap-sass' 2>HTML的基础navbar、footer 3>welcom...
项目：单页面官网制作（Bootstrap）总结
一.Bootstrap 导航栏（1）默认的导航栏向标签添加 class .navbar、.navbar-...
慕课网案例关于新版本的修正
bootstrap bootstrap从3.0到4.0的更新很多样式发生了改变. navbar-inverse为n...
用 dash_bootstrap_components 为 da
先安装 pip 包：把 bootstrap 的 sheetstyle 加入你的 app 中：生成 navbar...
Bootstrap组件之navbar
近期写前端页面踩的坑记录一下。。。一、navbar位置： Bootstrap很贴心的中文文档：https://v...
datatables 导致 bootstrap navbar无效
之前使用的是datatables.min.js，引入后会影响bootstrap navbar的（可响应）折叠效果，...
Bootstrap 4: Flex Box
Compare with Bootstrap 3,Bootstrap 4has added many new fu...
iOS常用宏定义
1.UI元素 //NavBar高度#defineNAVIGATIONBAR_HEIGHT 44//StatusBa...
一、bootstrap简介
知识点：1、bootstrap简介2、什么是bootstrap？3、为什么使用 Bootstrap？4、boots...

网友评论

本文标题：自定义Bootstrap 3 & 4 Navbar高度

本文链接：https://www.haomeiwen.com/subject/jfwiqftx.html

自定义Bootstrap 3 & 4 Navbar高度