javascript - 如何使输入组内联到 Bootstrap 中的列表元素？

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 类包装第一个按钮和要内联的元素组。我确定您是否喜欢使用无序列表，但如果您使用 span，代码会更具表现力，因为您在页面中代表的不是元素的无序列表列表。 p>

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