引导导航栏宽度/最大宽度答案

【问题标题】：Bootstrap navbar width / max-width引导导航栏宽度/最大宽度
【发布时间】：2015-07-02 01:55:50
【问题描述】：

我的引导导航栏链接很多，所以它会换行（我认为是 970 像素）。

我不希望它换行，链接的总宽度约为 1020 像素。我已经搜索了高低的答案:(

当我将 1020 像素的宽度添加到 .navbar .navbar-collapse 时，导航栏现在有点偏离中心。

我怎样才能让它成为1020px width 并保持居中？

 .navbar .navbar-collapse {
  text-align: center;
      width:1020px;
}

那么如何让导航栏不换行而是折叠平板电脑？

编辑：

这是 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>

这是附加的 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;
}

【问题讨论】：

你能给我你的html代码吗？
添加在上面。谢谢。

标签： javascript html css twitter-bootstrap

【解决方案1】：

您是否尝试过：空白：nowrap；此外，如果您将 html/css 减少到仍然存在问题的最低限度并发布 - 其他人将能够检查并确认解决方案。

【讨论】：

Nowrap 是 bizniz，它仍然向右偏离了大约 20 到 30 像素。好奇。
在这种情况下，我建议的不是解决方案而是替代方案：由于您有很多菜单 - 将其中一些重新组织成一两个组并将它们放在下拉列表中。如果您将导航栏药丸/选择的数量减少到 7 - 一切似乎都正常。请参阅 [链接]jsfiddle.net/r9xn3s2r/3
以及一般建议：不要为 768 像素的平板电脑世界设计需要 1024 像素的网站。
哈哈，谢谢 :D 艺术总监这样要求 :) 对于平板电脑，我认为图像可以减少 % 并且导航栏崩溃，您怎么看？
在我尝试之前我不会思考。 :-) 对于您的艺术总监-尝试妥协：如果屏幕比 XXXX 宽-使用完整菜单，如果不是：将一些东西放入下拉列表中。这就是媒体查询的用途。不？
另外，也许 (twitterbootstrap.net/forum/forum.php) 是另一个好去处。
酷，所以你从桥上跳下来，然后你想想这是否是个好主意。好的建议和链接。谢谢！ :D

【解决方案2】：

为什么是 1020px 而不是标准的 1024px，你可以稍微减小字体大小看看会发生什么。但是，如果没有屏幕截图，我无法为您提供太多帮助

【讨论】：

好主意。它现在向右偏移了大约 25 到 30 像素。