Question

任何能够解释如何在bootstrap中完成此操作的人都会这样做？

example

首先尝试使用2个内联表单，然后搜索按钮将其拧紧... 所以我在考虑内联和水平形式的组合。任何想法如何做到这一点？

Answer 1

我的猜测是你想要尽可能多的自举标记和尽可能少的自定义样式来做这件事，在这种情况下我会这样做：

HTML：

<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-horizontal">
            <div class="row">
                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="search" class="col-sm-2 control-label">Find</label>
                                <div class="col-sm-10">
                                    <input type="search" class="form-control" placeholder="What are you searching for?"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">in</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" placeholder="Postcode"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">under</label>
                                <div class="col-sm-10">
                                    <select class="form-control">
                                      <option>All categories</option>
                                      <option>Category 1</option>
                                      <option>Category 2</option>
                                      <option>Category 3</option>
                                      <option>Category 4</option>
                                      <option>Category 5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label"></label>
                                <div class="col-sm-10">
                                    <select class="form-control">
                                      <option>Within 20 miles of</option>
                                      <option>Within 30 miles of</option>
                                      <option>Within 40 miles of</option>
                                      <option>Within 50 miles of</option>
                                    </select>
                                </div>
                            </div>
                        </div>                
                    </div>
                </div>
                <div class="col-sm-2 cover-col">
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-search"></i> Search</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

CSS：

.panel-default {
    background-color: #e6ed9f;
}
.cover-col {
    height: 6em;
}
.cover-col .btn {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.cover-col .form-group {
    height: 100%;
    margin-bottom: 0;
}
.cover-col .form-group > div {
    height: 100%;
}

JSFIDDLE

如何在bootstrap中组合内联和水平形式？

1 个答案: