Bootstrap 3,如何减少输入元素中文本的填充?

Che*_*ung 12 twitter-bootstrap twitter-bootstrap-3

我将Bootstrap 3样式应用于我的编辑表单.但是,我想减少输入框和字体大小的填充.

因此,它使我的编辑形式更大.我试图更改网格列类(col-sm-,col-md-),但它没有帮助.

并且还覆盖了css,它使输入框不显示文本.

.form-horizontal .form-group input, 
.form-horizontal .form-group select,
.form-horizontal .form-group label { 
    height: 14px;
    line-height: 14px;
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

小智 11

总的来说,我不建议覆盖引导程序中的响应网格,因为这是使用它的主要原因!

要覆盖表单样式,只需使用下面的代码.

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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

还有一个Jsfiddle设置.... http://jsfiddle.net/ZRosenbauer/4wDKp/

  • 你可能想要做一个填充:1px 3px; 反而。因为它有点太靠近左边了 (2认同)