Bootstrap 4中的导航栏药丸颜色以填充整个高度
Posted
技术标签:
【中文标题】Bootstrap 4中的导航栏药丸颜色以填充整个高度【英文标题】：Navbar pills color in Bootstrap 4 to fill full height 【发布时间】：2017-11-18 14:02:23 【问题描述】：如何使导航项的背景完全填充颜色而不仅仅是它的一部分？
这是我尝试使用 Bootstrap 药丸的方法，但它不起作用。另外，我尝试了自己的 CSS，但它和药丸一样。
总而言之，我怎样才能让我的导航栏（在图像中）看起来像this one，仅涉及导航项 CSS 的背景颜色。
更新：添加了 HTML 和 CSS 代码
我的代码： html
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-paw" aria-hidden="true"></i> Purrfection Shop</a>
<!--<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-sign-in" aria-hidden="true"></i>
<i class="fa fa-sign-out" aria-hidden="true"></i>-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#jumbotron">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-container">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#!"><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
</li>
</ul>
</div>
</nav>
CSS：
.navbar
border-bottom: 1px solid #F5F5F5;
background-color: white;
text-transform: uppercase;
letter-spacing: 2px;
【问题讨论】：
我之前为 nav-item 制作的 CSS 只是background-color: blue;，它与 Bootstrap 中的药丸具有相同的效果。 @MuhammadUmar
嗯，我尝试复制您在 this JSFiddle 中的内容，但结果与屏幕截图中的导航栏完全不同。这些项目总是折叠的，当我修复它们时，它们都没有任何背景颜色。恐怕因为我不是 Bootstrap 专家，我能提供帮助的唯一方法就是使用与你所拥有的内容相匹配的实时页面的 CSS。
其他回答者的相关导航栏文档：v4-alpha.getbootstrap.com/components/navbar
【参考方案1】：
关键是从导航栏中删除顶部和底部填充，并将其添加到药丸中，从药丸中删除圆角，然后将您的自定义 css 包装在媒体查询中以使其具有响应性。
这是JSfiddle。
它是这样的：
代码如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
@media only screen and (min-width: 991px)
.navbar
padding-top: 0;
padding-bottom: 0;
.nav-pills .nav-link
padding-top: 15px;
padding-bottom: 15px;
border-radius: 0;
</style>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-paw" aria-hidden="true">
</i> Purrfection Shop</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>【讨论】：
在这个答案中，您是否使用基于导航栏高度的 15px 填充？如果我有一个 100 像素的导航栏，我会使用 50 和 50 像素的填充吗？ @dave317 这个导航的高度由文本的内边距和高度决定，像这样：top-padding + font-size + bottom-padding。【参考方案2】：
查看此代码：[JS FIddle Here] HTML
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-paw" aria-hidden="true">
</i> Purrfection Shop</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#jumbotron">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-container">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#!"><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
</li>
</ul>
</div>
</nav>
CSS：
@media only screen and (min-width: 991px)
.navbar
padding-top: 0;
padding-bottom: 0;
.active
background: blue;
.nav-item
.nav-link
padding-top: 15px;
padding-bottom: 15px;
.active
background: blue;
【讨论】：
【参考方案3】：请检查下面的小提琴。使用展开视图查看您的结果
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-linkbackground-color: #0275D8;color: #fff;
.navbarpadding: 0 1rem;
.navbar-toggleable-md .navbar-nav .nav-linkpadding: 10px 12px;
</style>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>【讨论】：
您的代码没有响应，它只是减小了导航栏的大小，因此背景完全被颜色填充。我不认为这是一个可靠的修改。 让它响应式由你决定。我只提供了菜单项的背景颜色代码，正如您的问题所说，您的背景颜色有问题，而不是使其响应。如果您需要任何帮助，请告诉我。 @OsamaAbbas 我已经在使用 Bootstrap 来实现响应式功能，所以不让导航栏像正文的其他部分一样响应是没有任何意义的！以上是关于Bootstrap 4中的导航栏药丸颜色以填充整个高度的主要内容，如果未能解决你的问题，请参考以下文章