Jquery 引导中的两行徽标和菜单

我最近遇到了

nav引导的一个问题

它看起来很完美，但由于大小从992到768px，我无法忍受将菜单和徽标放在同一行

这是图片

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

切换导航

这是

有人知道怎么做吗？ 提前感谢大家

试试这个

         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>

正文{
边缘顶部：10px；
}
.导航头{
字体大小：35px；
字体风格：普通；
}
潘塔赖

可能您必须对页面对齐方式进行一些更改，以匹配您的网页。。 它会表现得像这样。。！

---

忘记图片的底部。

看来您需要提前中断媒体查询

默认值为

768px

，如果需要，可以从

更改此设置

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

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

到此

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

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

---

然后下载定制版本，然后您的布局将在

992px

而不是

768px

中出现。您可以包括当前代码吗？是的，同上。我经常遇到这个问题，我通常只是添加一个媒体查询来调整导航项上的填充和/或边距。@Cam。。。我已经添加了html代码，谢谢您的评论；）我需要看看img responsive做了什么。你能把这个放到JSFIDLE中吗？@Cam谢谢你的关注。。