Question

我在我的表单中使用textfields，radiobuttons，textarea等。文本字段的大小非常小，看起来很糟糕：

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

代码是：

<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;
}

Answer 2

我认为你应该调整盒子的大小：cols或你应该把它作为textarea。

例如该框的那部分：

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

在django bootstrap中为文本输入字段获得更小的大小

2 个答案: