html - 在 django bootstrap 中缩小文本输入字段的大小

Question

我在表单中使用文本字段、单选按钮、文本区域等。文本字段非常小，看起来很糟糕:

我怎样才能做得稍微大一点？文本区域的高度如何小于性别字段的高度？

代码是:

<div class='form-group'>
                    <label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
                    <div class='col-md-6'>

                        {% render_field form.name class="form-control" placeholder="Full Name" type="text" %}

                        {% if form.name.errors %}
                        <div class="alert alert-danger tpad">
                            {{ form.name.errors.as_text }}
                        </div>

                        {% endif %}


                    </div>
                </div>
                <!-- name ends here -->
                {# Gender goes here #}
                <div class='form-group'>

                <label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
                    <div class='col-md-6'>

                        {% for radio in form.gender %}
                        {{ radio }}
                        {% endfor %}    
                        {{form.gender.errors}}


                    </div>
                </div>



                <!-- enroll ment number -->
                <div class='form-group'>
                    <label class='control-label col-md-2 col-md-offset-2' for='id_enrollment_number'>Enrollment Number</label>
                    <div class='col-md-6'>


                        {% render_field form.enrollment_no class='form-control' placeholder='Enrollment Number' type='text' %}
                        {% if form.enrollment_no.errors %}
                        <div class="alert alert-danger tpad">
                            {{ form.enrollment_no.errors.as_text }}
                        </div>

                        {% endif %}

                    </div>
                </div>





                <div class='form-group'>
                    <label class='control-label col-md-2 col-md-offset-2' for='id_faculty_name'>Faculty Name</label>
                    <div class='col-md-6'>

                        {% render_field form.faculty_name   class='form-control' rows="1" cols="1" placeholder='Faculty Name' type='text' %}
                        {% if form.faculty_name.errors %}
                        <div class="alert alert-danger tpad">
                            {{ form.faculty_name.errors.as_text }}
                        </div>

                        {% endif %}
                    </div>
                </div>

生成的代码是:

<div class='form-group'>
                    <label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
                    <div class='col-md-6'>

                        <input class="form-control" id="id_name" maxlength="200" name="name" placeholder="Full Name" type="text" />




                    </div>
                </div>
                <!-- name ends here -->

                <div class='form-group'>

                <label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
                    <div class='col-md-6'>


                        <select id="id_gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
                    </div>
                </div>

解决方案:bootstrap渲染的文字大小为20px。我在这里手动将它更改为 40px:

.uneditable-input{display:inline-block;height:40px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,

Answer 1

由于您的代码为名称输入生成了一个 id，因此在您的 CSS 中添加(或更新)这条规则就可以了

#id_name {
  height: 30px;       /*  where you give it same height as your select  */
}

另一种方式，更通用的表单元素(输入文本和选择)可能是这样的

form-control select,
form-control input[type=text] {
  height: 30px;
}