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>

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

1 个答案: