Html 减少 Twitter Bootstrap 输入字段的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13754536/
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
Decrease Twitter Bootstrap input field's height?
提问by Shakeeb Ahmad
In my form I would like to decrease my Input field's height.
在我的表单中，我想降低输入字段的高度。
I know there are input-small, input-medium classes which control input field's width, but is there any thing similar for controlling height?
我知道有 input-small, input-medium 类可以控制输入字段的宽度，但是有没有类似的东西可以控制高度？
I couldn't find any and if there isn't how do I go about overriding the defaults?
我找不到任何，如果没有，我该如何覆盖默认值？
回答by Neps
I couldn't find any and if there isn't how do I go about overriding the defaults?
我找不到任何，如果没有，我该如何覆盖默认值？
Bootstrap's input field height is defined using attribute selectors e.g. input[type="text"], input[type="password"]
Bootstrap 的输入字段高度是使用属性选择器定义的，例如 input[type="text"], input[type="password"]
You can override it with your styles in the same selector format, or uses classes and such.
您可以使用相同选择器格式的样式覆盖它，或者使用类等。
.mystyle input[type="text"] {
height: 14px;
font-size: 10px;
line-height: 14px;
}
回答by L_7337
According to the Bootstrap doc: Bootstrap CSS, you should use .input-sm
根据 Bootstrap 文档：Bootstrap CSS，您应该使用.input-sm
If you're going to write your own CSS, you are not really taking advantage of the power of Bootstrap.
如果您打算编写自己的 CSS，那么您并没有真正利用 Bootstrap 的强大功能。
<input class="form-control input-sm" type="text" placeholder=".input-sm">
It just changes the heightproperty as mentioned by @Neps
它只是改变height@Neps 提到的属性
But, I have had to override the .input-smin my own CSS to get the sizing right.
但是，我不得不.input-sm在我自己的 CSS 中覆盖以获得正确的大小。
I just prefer to use the Bootstrap classes where ever possible.
我只是更喜欢尽可能使用 Bootstrap 类。
回答by Chris
回答by C.List
I would suggest learning to use a LESS or SASS compiler for your bootstrap files, and download the LESS/SASS files along with Bootstrap. It's not very difficult and is really the way you are "supposed" to customize Bootstrap. It might be a little heavy-handed for one or two tweaks, but for things like the overall color scheme or grid / input control spacing and padding it really is much better as the LESS variables are universal and might apply to things that you wouldn't think to override. For example, you should be decorating all of your inputs with the "form-control" class. The "form-control" and "output" classes are defined in the file: forms.less, and the height of the field is based on many variables check it out:
我建议学习为引导文件使用 LESS 或 SASS 编译器，并下载 LESS/SASS 文件和 Bootstrap。这不是很困难，而且确实是您“应该”自定义 Bootstrap 的方式。对于一两个调整可能有点笨手笨脚，但对于整体配色方案或网格/输入控件间距和填充之类的事情，它确实要好得多，因为 LESS 变量是通用的并且可能适用于您不会的事情t想覆盖。例如，您应该使用“form-control”类装饰所有输入。"form-control" 和 "output" 类定义在文件：forms.less 中，字段的高度是基于许多变量检查出来的：
.form-control {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
...more stuff I removed...
}
All of the variables are defined in a single, easy to work with file, and changes made there affect everything. Here's a sample:
所有变量都定义在一个易于使用的文件中，在那里所做的更改会影响一切。这是一个示例：
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicate dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
If a new version of BS comes out, you simply apply your old variables to the new BS files using the compiler.
如果出现新版本的 BS，您只需使用编译器将旧变量应用于新 BS 文件即可。
Links: http://getbootstrap.com/customize/
链接：http: //getbootstrap.com/customize/
Visual studio users: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
Visual Studio 用户：https: //marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
