html - 向 Bootstrap 的导航栏添加更多组件会导致它创建额外的行

Question

我正在尝试学习 Bootstrap，并且我创建了一个简单的导航栏:

  <div class="navbar navbar-custom navbar-fixed-top">
        <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
            <a 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>
            </a>
        </div>

        <div class="navbar-collapse collapse navbar-left">
            <form class="navbar-form navbar-left" >
                <div class="input-group">
                <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
             <!-- ADDING SOMETHING HERE -->
            </div>
            </form>
        </div>
        <div class="navbar-collapse collapse navbar-right">

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li>&nbsp;</li>
            </ul>

        </div>
    </div>

这样，一切正常并且看起来不错。但是，如果我向我的输入组添加任何内容，例如简单的字形图标:

<span class="input-group-addon" id="basic-addon2">a2</span>

或另一个文本框:

<input type="text" class="form-control" placeholder="Recipient's surname" aria-describedby="basic-addon2">

导航栏分崩离析(分成三行)。此处添加了损坏的导航栏的 Jsfiddle:https://jsfiddle.net/DTcHh/5298/ .如何阻止它分崩离析？

Answer 1

好吧，我尝试修改您的 HTML 中的类选择器并在 CSS 中添加一些，如下所示:

<div class="input-group">
   <li>
      <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2" />
  </li>
  <li>
      <span class="btn btn-default" id="basic-addon2">a2</span>
  </li>
</div>

.input-group li {
display:table-cell;
vertical-align:middle;
}

这是 DEMO :