Question

尝试通过内联所有元素来创建易于使用的搜索表单。看起来标签将输入向下推动约14px左右，但搜索按钮没有任何相同的功能。关于如何让所有东西都在同一条线上的任何想法？

Screenshot

<div class="row">
    <div class="col-md-2">
        <label>Date: </label>
        <input type="date" name="startdate" class="form-control"/>
    </div>
    <div class="col-md-2">
        <label>Optional Search String: </label>
        <input type="text" class="form-control"/>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn btn-primary">Search</button>
    </div>
</div>

Answer 1

你不需要添加任何技巧bootstrap已经有一个类form-inline这样的场景。您可以在您的要求中使用它。我已经根据这个修改了你的课程。

<div class="form-inline">
    <div class="form-group">
        <label>Date: </label>
        <input type="date" name="startdate" class="form-control"/>
    </div>
    <div class="form-group">
        <label>Optional Search String: </label>
        <input type="text" class="form-control"/>
    </div>
  <div class="form-group" style="vertical-align:bottom">
        <button type="button" class="btn btn-primary">Search</button>
  </div>
</div>

我刚刚使用vertical-align:bottom和最后一个form-group因为你在最后一组中只有一个元素，而不是剩下的两个元素。

<强> Demo

Answer 2

一个技巧是在label：

之前添加隐藏的button

<label class="hiddenLabel">This is hidden label</label>
<button type="button" class="btn btn-primary">Search</button>

然后您可以将visibility: hidden;应用于此隐藏标签。

<强> Bootply Demo

Answer 3

我不相信那里有任何特定的引导课程，但使用按钮上的margin-top: 14px可以很容易地做到这一点

Answer 4

             <div class="row">
                    <div class="col-md-2">
                        <label>Date: </label>
                        <input type="date" name="startdate" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                        <label>Optional Search String: </label>
                        <input type="text" class="form-control"/>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" style="margin-top: 28px">
                            Search
                        </button>
                    </div>
                </div>

如何将输入（带标签）与同一行上的按钮对齐？

4 个答案: