添加Facebook按钮后，Bootstrap 3响应式导航栏无法内联

Question

我使用bootstrap 3导航栏并在iPad上进行了响应测试，在我添加了像按钮这样的facebook之后，它将导航项目分成不同的行

代码：

<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-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="navbar-brand logo" href="#"><img src="images/brand.png" class="img-responsive" style="height:36px;"></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav" id="main-nav">
          <li><a href="<?php echo baseurl ?>"><span class="glyphicon glyphicon-home"></span></a></li>
          <li><a href="advertise">Advertise</a></li>
          <li><a href="contact">Contact</a></li>
      </ul>

      <span class="fb-like" data-href="https://www.facebook.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>


          <div class="navbar-right">
            <button type="button" class="btn btn-pink" data-toggle="modal" data-target=".bs-login-modal-sm"><span class="glyphicon glyphicon-user"></span> Sign In</button>&nbsp;
            <button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#regModal"><span class="glyphicon glyphicon-star"></span> Join For Free</button>
          </div>

    </div><!--/.nav-collapse -->
  </div>
</div>

如何在响应式视图中解决？

Answer 1

为避免这种情况，您可以在导航栏div中添加like按钮，如下面的代码所示。

<div class="navbar-right">
        <span class="fb-like" data-href="https://www.facebook.com/woohoo69/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">FACEBOOK</span>
        <button type="button" class="btn btn-pink" data-toggle="modal" data-target=".bs-login-modal-sm"><span class="glyphicon glyphicon-user"></span> Sign In</button>&nbsp;
        <button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#regModal"><span class="glyphicon glyphicon-star"></span> Join For Free</button>
</div>