Question

我想用这种风格制作我的形式作为我试过的图像参考，但我没有成功

我将结构设为以下代码...如果有人有任何其他代码参考分享也会很好。感谢

链接demo

<div class="row">
            <div class="col col-sm-12">
                <div class="container"><br/>
                    <form class="form form-inline form-multiline" role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Pesquisar" aria-describedby="basic-addon2">
                                <span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-search"></i></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="button" class="btn btn-default" value="Filtros">
                        </div>
                        <div class="col col-sm-12">
                            <div class="col col-sm-4">
                                <ul>
                                    <h4>Situação</h4>
                                    <li>Útumos incluídos</li>
                                    <li>Todos</li>
                                    <li>Ativos</li>
                                    <li>Excluídos</li>
                                    <li>Inativos</li>
                                </ul>
                            </div>
                            <div class="col col-sm-4">
                                <ul>
                                    <h4>Tipo de cadastro</h4>
                                    <li>Cliente</li>
                                    <li>Fornecedor</li>
                                    <li>Transportador</li>
                                    <li>Vendedor</li>
                                    <li>Sem tipo definido</li>
                                </ul>
                            </div>
                            <div class="col col-sm-4">
                                <h4>Outras opções de pesquisa</h4>
                                <div class="form-group">
                                        <label>Vendedor</label>
                                        <input type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                            <label>Município</label>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="col-md-6">
                                                <label>Estado</label><br/>
                                                <select name="" id="">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                        </div>
                                </div>
                                <div class="form-group">
                                        <label>Telefone / Celular</label>
                                        <input type="text" class="form-control">
                                </div>
                                <div class="form-group">
                                        <label>Prox. Visita</lebel>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>De:</label>
                                                <div class='input-group date' id='datetimepicker1'>
                                                    <input type='text' class="form-control" />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Até:</label>
                                                <div class='input-group date' id='datetimepicker1'>
                                                    <input type='text' class="form-control" />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="form-group">
                                        <label>Sem compras no período:</lebel>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>De:</label>
                                                <div class='input-group date' id='datetimepicker1'>
                                                    <input type='text' class="form-control" />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Até:</label>
                                                <div class='input-group date' id='datetimepicker1'>
                                                    <input type='text' class="form-control" />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

Answer 1

使用Bootstrap Grid，inactivity-timeout的组合，并将其与col-*-*类一起使用。

请查看下面的代码段（使用全屏模式）或查看更新后的 Demo 。

.form-group

label {
  display: block;
}

.form-group {
  margin-bottom: 10px !important;
}

.form-control {
  width: 100% !important;
}

.input-group {
  width: 100%;
}

.form-holder {
  margin: 0 -15px;
}

.form-holder h4 {
  padding: 0 15px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
}

希望这有帮助！

Answer 2

使用：

[class*='col-sm-']:not(:last-child):after

Bootstrap样式表格内联

2 个答案: