【问题标题】:Bootstrap 3, how to reduce the padding of text in input element?Bootstrap 3,如何减少输入元素中文本的填充?
【发布时间】:2013-12-04 06:02:59
【问题描述】:

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

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>

【问题讨论】:

  • 为什么在行标签之外使用 col--?这可以并且可能会破坏填充/边距。为什么它们设置为不同的屏幕?(sm 和 md)。

标签: twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

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

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

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

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

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

【讨论】:

  • 你可能想做一个填充:1px 3px;反而。因为它离左边有点太近了
  • 您可以将 bootstrap 添加到 fiddle 中,而无需复制和过去所有 boostrap css:Using twitter's bootstrap in jsFiddle
猜你喜欢
  • 2018-02-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-07
  • 1970-01-01
  • 1970-01-01
  • 2011-09-12
  • 2023-01-11
相关资源
最近更新 更多