如何使输入组内联到引导列表中的元素？

Question

我想使输入组在列表中内联。我写了下面的代码：

<div class="container-fluid"> 
    <div class="row"> 
    <ul class="list-inline pull-right"> 
     <li> 
     <button class="btn btn-info"> 
      <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 
     Cart <span class="badge">0</span> 
     </button> 
     </li> 
     <li> 
     <div class="input-group"> 
      <input id="address" placeholder="City or Zipcode" class="form-control" type="textbox"> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button" id="addressSearch">Search</button> 
      </span> 
     </div> 
     </li> 
    </ul> 
    </div> 
</div> 

我没有得到输入组内联。请帮我解决这个问题。

Answer 1

您可以包装第一个按钮和您想要与.input-group类一致的元素组。我注意到，如果你使用无序列表，但是代码更具有表现力，那么因为你在页面上代表的内容不是无序的列表项目，所以我很确定你是否使用无序列表。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn btn-info"> 
       <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 
       Cart <span class="badge">0</span> 
      </button> 
     </span> 
     <input type="text" class="form-control" placeholder="Search for..."> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Search</button> 
     </span> 
    </div><!-- /input-group --> 
    </div><!-- /.row --> 
</div>