twitter-bootstrap Bootstrap 3,如何减少输入元素中文本的填充?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20092661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3, how to reduce the padding of text in input element?
提问by Cheung
I apply the Bootstrap 3 style to my edit form. However, I want to reduce the padding of the input box and font-size.
我将 Bootstrap 3 样式应用于我的编辑表单。但是,我想减少输入框和字体大小的填充。
Because of this, it make my edit form larger. I tried to change the grid column class (col-sm-,col-md-), but it didn't help.
因此,它使我的编辑表单更大。我尝试更改网格列类(col-sm-、col-md-),但没有帮助。
And also override the css, it make the input box doesn't show the text.
并且还覆盖了css,它使输入框不显示文本。
.form-horizontal .form-group input,
.form-horizontal .form-group select,
.form-horizontal .form-group label {
height: 14px;
line-height: 14px;
}
HTML:
HTML:
<div class="form-group">
<label for="txtProductName" class="col-sm-2 control-label">Name :</label>
<div class="col-md-3">
<input type="text" id="txtProductName" CssClass="form-control"/>
</div>
</div>


采纳答案by Zac Rosenbauer
Overall I do not recommend overriding the responsive grid in bootstrap as that is the main reason to be using it!
总的来说,我不建议在引导程序中覆盖响应式网格,因为这是使用它的主要原因!
To override the form styling just use the code below.
要覆盖表单样式,只需使用下面的代码。
HTML
HTML
<div class="form-group">
<label for="txtProductName" class="col-sm-2 control-label">Name :</label>
<div class="col-md-3">
<input type="text" id="txtProductName" Class="form-control form-fixer"/>
</div>
</div>
CSS
CSS
input.form-fixer {
padding: 1px;
font-size: 19px;
}
.form-horizontal .form-group input,
.form-horizontal .form-group select,
.form-horizontal .form-group label
{
height: 14px;
line-height: 14px;
}
Also have a Jsfiddle set up.... http://jsfiddle.net/ZRosenbauer/4wDKp/
也有一个 Jsfiddle 设置.... http://jsfiddle.net/ZRosenbauer/4wDKp/

