Question

我的bootstrap导航栏链接很多，所以它包装（我认为在970px） - 我不想让它换行，链接的宽度总共约为1020px。我已经搜索了高低的答案:(

当我向.navbar .navbar-collapse添加1020px的宽度时，导航栏现在偏离中心 - 如何才能使其宽度为1020px并保持居中？

 .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;
}

Answer 1

你试过了吗？白色空间：nowrap; 此外，如果您将html / css降至最低但仍有问题并发布 - 其他人将能够检查并确认解决方案。

Answer 2

为什么1020px而不是标准1024px，您可以稍微减小字体大小以查看会发生什么。但是我没有太多可以帮助你，没有截图

Bootstrap导航栏宽度/最大宽度

2 个答案: