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>

这样，一切正常，看起来不错。但是，如果我向输入组添加任何内容，例如简单的glyphicon：

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

向Bootstrap的导航栏添加更多组件会导致其创建其他行

1 个答案: