Question

我尝试将3个选择菜单和一个提交按钮与引导程序3对齐。

我尝试使用行和内联属性，但它不起作用：

    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
            <label class="control-label" for="date_deb">Date D&eacute;but</label>
            <select name="date_deb" id="date_deb" class="form-control">
                <option value="07/11/2012">07/11/2012</option><option value="30/09/2012">30/09/2012</option>            </select>
          </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
            <label class="control-label" for="date_deb">Date D&eacute;but</label>
            <select name="date_deb" id="date_deb" class="form-control">
                <option value="07/11/2012">07/11/2012</option><option value="30/09/2012">30/09/2012</option>            </select>
          </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
            <label class="control-label" for="date_deb">Date D&eacute;but</label>
            <select name="date_deb" id="date_deb" class="form-control">
                <option value="07/11/2012">07/11/2012</option><option value="30/09/2012">30/09/2012</option>            </select>
          </div>
        </div>
        <div class="col-md-3">
        <br/>
        <button type="submit" class="btn btn-success" id="date_search">Rechercher</button>
        </div>
    </div>

和内联类的其他解决方案：

<div class="row">
   <div class="col-lg-12">
        <form class="form-inline" role="form" method="post">
            <div class="form-group">
            <label class="control-label" for="date_deb">Date D&eacute;but</label>
            <select name="date_deb" id="date_deb" class="form-control">
            <option value="07/11/2012">07/11/2012</option><option value="30/09/2012">30/09/2012</option>            </select>
        </div>

        <div class="form-group">
            <label for="date_fin">Date Fin</label>
            <select name="date_fin" id="date_fin" class="form-control">
                <option value="07/11/2012">07/11/2012</option>
                    <option value="30/09/2012">30/09/2012</option>              
                </select>
             </div>

          <div class="form-group">
            <label for="date_ref">Date R&eacute;f&eacute;rence</label>
             <select name="date_ref" id="date_ref" class="form-control">
            <option value="07/11/2012">07/11/2012</option><option value="30/09/2012">30/09/2012</option>            </select>
          </div>

          <div class="form-group">
          <br/>
           <button type="submit" class="btn btn-success" id="date_search">Rechercher</button>
          </div>

        </form>
        </div>
    </div>

但表单按钮仍然与选择菜单不对齐。见下文： Image http://desfurets.free.fr/photo/upload/oi5i8kysfhiq7ixgcct954jhlzws84.jpg

Answer 1

您可能需要使用一些css才能将按钮与select dropdowns

对齐

.row .btn {
    margin-top: 5px;
}

http://www.bootply.com/93481

Bootstrap 3：标签位于字段顶部，并以内联形式提交按钮

1 个答案: