[英]Bootstrap navbar width / max-width
My bootstrap navbar links are many, so it wraps (I think at 970px).我的引导导航栏链接很多,所以它会环绕(我认为是 970 像素)。
I don't want it to wrap, the width of the links in total are about 1020px.我不希望它换行,链接的总宽度约为 1020 像素。 I've searched high and low for the answer :(我在高低处寻找答案:(
When I add a width of 1020px to .navbar .navbar-collapse
the nav bar is now a little off center.当我将 1020px 的宽度添加到.navbar .navbar-collapse
,导航栏现在有点偏离中心。
How can I get it to be 1020px width
and stay centered?我怎样才能让它成为1020px width
并保持居中?
.navbar .navbar-collapse {
text-align: center;
width:1020px;
}
Then how do I get the navbar to not wrap but to collapse for tablet?那么如何让导航栏不包裹而是折叠平板电脑?
Edit:编辑:
Here's the html - basically (link names removed).这是 html - 基本上(链接名称已删除)。
<!-- NAVIGATION -->
<div class="container">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#welcome">LINK 1</a></li>
<li><a href="#who">LINK 2</a></li>
<li><a href="#benefits">BLAH BLAH</a></li>
<li><a href="#outline">BLAH BLAH BLAH</a></li>
<li><a href="#package">THE BLAH BLAH BLAH</a></li>
<li><a href="#faq">BLAH</a></li>
<li><a href="#testimonials">BLAH BLAH BLAH</a></li>
<li><a href="#bonuses">BLAH</a></li>
<li><a href="#buy" class="buyNow">BLAH</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed navbar -->
</div>
Here's the additional css:这是额外的css:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
width:1024px;
white-space: nowrap;
border: 3px dotted #ff00ff;
}
/* navbar */
.navbar-default {
background-color: #f2b32a;
border-color: #C89321;
font-size: 13px;
letter-spacing: -0.9px;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
.navbar {
box-shadow: 1px 1px 3px #C89321;
/* visibility: hidden; */
}
.buyNow{
font-size: 19px;
}
Have you tried: white-space: nowrap;你有没有试过:white-space: nowrap; Also if you reduce your html/css to a minimum that still has a problem and post it - others will be able to check and confirm the solution.此外,如果您将 html/css 减少到仍然有问题的最低限度并发布它 - 其他人将能够检查并确认解决方案。
Why 1020px and not a standard 1024px, you can decrease the font size a bit to see what happens.为什么是 1020px 而不是标准的 1024px,您可以稍微减小字体大小,看看会发生什么。 But there isn't really much I can help you with, without a screenshot但是没有截图我真的帮不了你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.