css - Bootstrap 上的控件太高

Question

我使用 bootwatch css http://bootswatch.com/flatly/用于 Bootstrap

当我在大屏幕上使用模板时，组件太高了

http://jsfiddle.net/o37rak4k/1/

我想我没有很好地使用它。我该如何解决这个问题？我需要控制“正常”大小(比文本大小大一点)

我的 html 代码:

<div class="container">
     <h2>
        Liste des interventions
    </h2>

    <fieldset>
        <div class="row">
            <div class="form-group">
                <label class="col-lg-2 control-label" for="contenu_DdlClients">Client :</label>
                <div class="col-lg-10">
                    <select name="ctl00$contenu$DdlClients" id="contenu_DdlClients" class="form-control">
                        <option value="0"></option></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label class="col-lg-2 control-label">Planification de :</label>
                <div class="col-lg-2">
                    <div class="form-group has-success has-feedback">
                        <input name="ctl00$contenu$dateDebPlanification" type="text" id="contenu_dateDebPlanification" class="form-control hasDatepicker" style="width:130px;"> <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
 <span id="contenu_RgDateDebut" style="visibility:hidden;">*</span>

                    </div>
                </div>
                <div class="col-lg-1">à :</div>
                <div class="col-lg-2">
                    <div class="form-group has-success has-feedback">
                        <input name="ctl00$contenu$dateFinPlanification" type="text" id="contenu_dateFinPlanification" class="form-control hasDatepicker" style="width:130px;"> <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
 <span id="contenu_RgDateFin" style="visibility:hidden;">*</span>

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

Answer 1

您需要更改 bootstrap.min.css 或 bootstrap.css 文件中的行高或高度，因为它是 bootstrap 的标准class="form-control".

或者你可以在页面中覆盖它(这不是理想的 - 而不是在 css 中)

.form-control {height:16px;}

JSFIDDLE DEMO

对于日历图像，使用以下示例:

JSFIDDLE DEMO for Calendar Glyphicon - 看看代码。我添加了与原始代码不同的示例。

请记住使用 class="col-....."(使用 GRID )来指定宽度而不是输入的实际宽度设置，否则日历图像将没有坐在输入框旁边，也没有正确调整大小。

Horizontal form spacing and label alignment - 表单布局是水平的，标签与输入对齐