引导固定导航浮点线和文本通过
引导固定导航浮点线和文本通过
提问于 2015-08-14 19:44:27
忍受我吧。
因此，我有一个标准的导航与小的变化，它是设置为150 So高在css，所以更大的标志将适合它在左边的“品牌”通常是在演示。
我想做的是这样的事情--最后三个项目都是服务。我真的不想喝一杯，所以我想
评估改进事故反应
在上面。通常，我会用div在页面上解决所有这些问题，但在这种情况下，我不知道如何将它添加到菜单的UL中。
你知道怎么做吗?也许是用A:以前还是别的什么？
HTML：
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="news-resources.html">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Assessments</a></li>
<li><a href="#">Improvements</a></li>
<li><a href="#">Incident Response</a></li>
</ul>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-08-15 07:20:36
如果您想要的话，您几乎可以插入一个div：也许这将帮助您开始工作。
Navbar-collapse被分割为两个单独的navbar-nav元素，在第二个链接集之上的第二个services类中包含新的services类。
body,
html {
margin-top: 175px;
}
.navbar.navbar-custom {
height: 150px;
border-bottom: 4px solid #444;
}
.navbar-custom .services {
color: #444;
font-size: 18px;
font-weight: 700;
text-align: center;
margin-top: -25px;
}
.navbar-custom .navbar-nav {
margin-top: 45px;
}
.navbar-custom .navbar-right .navbar-nav > li > a {
font-size: 12px;
}
@media (max-width: 767px) {
.navbar-custom .services {
text-align: left;
padding-left: 15px;
padding-top: 20px;
}
.navbar-custom .navbar-toggle,
.navbar-custom .navbar-collapse {
margin-top: 55px;
background: #f5f5f5;
border: none;
}
.navbar-custom .navbar-nav {
margin-top: 15px;
}
.navbar-custom .navbar-right .navbar-nav > li > a {
font-size: 14px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/200x115/444/fff?text=Logo">
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li><a href="#">About</a>
</li>
<li><a href="news-resources.html">News</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav">
<div class="services">Services</div>
<li><a href="#">Assessments</a>
</li>
<li><a href="#">Improvements</a>
</li>
<li><a href="#">Incident</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="well wel-lg">Some Junk</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32017600
复制相关文章
相似问题
腾讯云开发者
