我在表单中使用文本字段、单选按钮、文本区域等。文本字段非常小,看起来很糟糕:
我怎样才能做得稍微大一点?文本区域的高度如何小于性别字段的高度?
代码是:
<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,
最佳答案
由于您的代码为名称输入生成了一个 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;
}
关于html - 在 django bootstrap 中缩小文本输入字段的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37096325/