Question

我有一个小的Bootstrap 4表单，其中一行包含下拉列表，搜索框和两个按钮。当我在iPhone 6中查看页面时，我看到GO按钮位于搜索框下方。如何在同一行上同时使用搜索和GO按钮？

Plnkr链接为https://plnkr.co/edit/uJk6iE6NjBEXGcM2vhqT?p=preview

<div class="container">
        <form class="form-inline">
            <div class="row">
                <div class="col-md-3 hidden-md-down">
                    <select class="custom-select">
                        <option selected>Sort by</option>
                        <option value="1">First Name</option>
                        <option value="2">Last Name</option>
                        <option value="3">Salary</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <input class="form-control" type="text" data-action="grow" placeholder="Search">
                    <button class="btn btn-primary" type="button">
                        <span class="icon icon-magnifying-glass">GO</span>
                    </button>
                </div>
                <div class="col-md-3 hidden-md-down float-right">
                    <button type="button" class="btn btn-pill btn-success">Add</button>
                </div>
            </div>
        </form>
    </div>

Answer 1

有关input group的更多信息，您可以阅读文档here

试试这个

HTML：

<div class="input-group">
  <input class="form-control" type="text" data-action="grow" placeholder="Search">
  <span class="input-group-btn">
     <button class="btn btn-primary" type="button">
           <span class="icon icon-magnifying-glass">GO</span>
      </button>
  </span>
</div>

如何在iPhone6中并排显示两个元素？

1 个答案: