在折叠模式下显示导航栏徽标和导航栏切换之间的div

Question

我正在尝试在导航栏徽标和导航栏切换之间放置一个搜索表单，如下所示：

但我总是得到以下结果：

当导航栏展开（未折叠）时，我没有任何问题。有没有办法让这项工作？这是我的代码。

<header class="container navbar navbar-default navbar-fixed-top navbar-custom">
  <!-- First row, includes logo and search form -->
  <div class="navbar-header" style="width:100%;">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <a href="/" id="logo" class="navbar-brand">Le Collectif</a>

    <div class="navbar-left navbar-slogan-container">
      <div class="navbar-slogan hidden-xs hidden-sm">
        <p>Slogan</p>
      </div>
    </div>

    <div class="navbar-right">
      <form class="navbar-form" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Recherche" name="srch-term" id="srch-term">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- Second row, regular menu -->
  <nav class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
    </ul>
  </nav>
</header>

我尝试在按钮之前使用搜索表单放置div，但它不会改变任何内容。有什么想法吗？

Answer 1

如果其他人有同样的问题，请在此处回答。原来这部分代码

<div class="navbar-left navbar-slogan-container">
  <div class="navbar-slogan hidden-xs hidden-sm">
    <p>Slogan</p>
  </div>
</div>

是问题的原因。渲染时，即使div的宽度为0px，一些css将高度设置为50px，并以某种方式导致navbar-right div进入第二行。将hidden-xs和hidden-sm放在容器div上可以解决问题。