Bootstrap 中两行中的徽标和菜单

Question

我最近遇到了nav bootstrap的问题

看起来很完美，但是992到768px的大小，我受不了把菜单和logo放在同一行。

这是图片

HTML 代码

<div id="main-header">
    <div class="row">
      <div class="col-lg-12">
        <nav class="navbar navbar-default navbar-static-top" role="navigation" id="navigation-home">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <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="index.html"><img src="img/logo.png" class"img-responsive" alt="Logo PantaRei"></a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav pull-right">
              <li class="dropdown">
                <a href="index.html" class="dropdown-toggle" data-toggle="dropdown"> Home <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="index.html"> Home Revolution Slider </a></li>
                  <li><a href="home-flexslider.html"> Home Flexslider</a></li>
                  <li class="divider"></li>
                  <li><a href="home-2.html"> Home Style 2</a></li>
                  <li><a href="home-3.html"> Home Style 3</a></li>
                  <li><a href="home-4.html"> Home Style 4</a></li>
                  <li><a href="home-5.html"> Home Style 5</a></li>
                  <li><a href="one-page.html"> One Page</a></li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle navigation-effects" data-toggle="dropdown"> Blog <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="blog-large.html"> Large Blog </a></li>
                  <li><a href="blog-medium.html"> Medium Blog </a></li>
                  <li><a href="blog.html"> Small Blog </a></li>
                  <li class="divider"></li>
                  <li><a href="single-post.html"> Single Post </a></li>
                </ul>
              </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="#"> Grid System </a></li>
                  <li><a href="pricing-tables.html"> Pricing Tables </a></li>
                  <li><a href="icon.html"> Icons </a></li>
                  <li><a href="typography.html"> Typhography </a></li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Portfolio <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="portfolio-4.html"> Portfolio 4 columns </a></li>
                  <li><a href="portfolio-3.html"> Portfolio 3 columns </a></li>
                  <li><a href="portfolio-2.html"> Portfolio 2 columns </a></li>
                  <li class="divider"></li>
                  <li><a href="single-project.html"> Single Project </a></li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Pages <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="gridsystem.html"> Grid System </a></li>
                  <li><a href="full-width.html"> Full Width </a></li>
                  <li><a href="custom-header.html"> Custom Header </a></li>
                  <li><a href="404.html"> 404 Error </a></li>
                  <li><a href="team.html"> Team </a></li>
                  <li><a href="search.html"> Search Result </a></li>
                  <li><a href="faq.html"> FAQ </a></li>
                  <li class="divider"></li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="contact-us.html">Contact Us</a>
              </li>
            </ul>
          </div> <!-- /.navbar-collapse -->
        </nav>
      </div>
    </div> <!-- /.row -->
  </div> <!-- /#main-header -->

这是jsfiddle

有人知道怎么做吗？ 在此先感谢大家

Answer 1

试试这个。

         body{
            margin-top: 10px;
        }
        .nav-header{
        font-size: 35px;
        font-style: normal;
        }
            <div class="navbar" >
                 <div class="nav-header" > <span style="color:black;">PANTA </span> <span style="color:#ccccff;">REI </span></div>

                <div class="navbar-inner" style="border: 0px;">

                    <div class="container">

                        <ul class="nav" style="margin-left: 200px;">

                            <li ><a href="#">Home</a></li>
                            <li><a href="#">Invoice</a></li>
                            <li><a href="#">GRN</a></li>
                            <li><a href="#">Stock </a></li>
                            <li><a href="#">Supplier</a></li>
                            <li class="active"><a href="#">Phone Repairing </a></li>
                            <li><a href="#">Settings </a></li>
                        </ul>
                    </div>
                </div>
            </div>

可能您必须对页面对齐方式进行一些更改以匹配您的网页.. 会这样显示..！ 忘记图片底部了。

Answer 2

看来你需要早点中断媒体查询。

默认为768px，如果需要，可以自定义Bootrstap Customizer

改变这个

@grid-float-breakpoint => @screen-sm-min

到此

@grid-float-breakpoint => @screen-md-min

并下载自定义版本，然后你的布局将打破992px而不是768px