bootstrap navbar-static-top菜单在两行中断 [英] bootstrap navbar-static-top menu breaks on two lines

问题描述

我遇到了bootstrap navbar的问题。

I encountered a problem with the bootstrap navbar.

我使用navbar-static-top创建菜单 - 首先它是好的。当菜单被扩展和几个项目添加，现在与之前的宽度崩溃，它是蔓延成两行，看起来可怕。在CSS bootstrap'a深入，但没有太多的成功。请帮助，如何到这里？

I Made menu using the navbar-static-top - at first it was all good. When menu was expanded and few items added, and now with the width before to collapse, it is spreading into two lines that looks awful. In CSS bootstrap'a dig deeper, but without much success. Please help, how to be here?

目前看起来如下所示：

Currently it looks like shown here:

Navbar代码：

<div class="navbar-wrapper">
  <div class="container">

    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a>
        </div>

        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="features.html">Features</a></li>
                <li><a href="screenshots.html">Screenshots</a></li>
                <li class="active"><a href="usage.html">Usage</a></li>
              </ul>
            </li>


            <li><a href="features.html">Features</a></li>
            <li><a href="screenshots.html">Screenshots</a></li>
            <!--li class="active"><a href="usage.html">Usage</a></li-->
            <li><a href="download.html">Download</a></li>
            <li><a href="purchase.html">Purchase</a></li>
            <!--li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
              </ul>
            </li-->
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="contact.html">Contact</a></li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

推荐答案

我也想通过CSS使用它，自定义Bootstrap， Skelly answer在 Bootstrap 3 工作正常，但在我的情况下 Bootstrap 3.2 CSS更改了一个...更新版本的所有CSS必需

I also wanted to use it through CSS without redownloading and customizing Bootstrap, Skelly answer is working fine on Bootstrap 3 but in my case Bootstrap 3.2 the CSS changed a litte... Here is an updated version of all CSS required

    @media (max-width:992px){
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
     }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
     }
     .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    } 
}

这篇关于bootstrap navbar-static-top菜单在两行中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！