Question

我使用bootwatch css http://bootswatch.com/flatly/进行bootstrap

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

layout problem

我想我不能很好地使用它。我该如何解决这个问题？我需要控制正常的＆＃34;大小（略大于文字大小）

我的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 - 表单布局是水平的，标签与输入对齐

bootstrap上的控件太高了

1 个答案: