在我的表单中，我想减少输入字段的高度。
我知道有一些输入小、输入中等的类可以控制输入字段的宽度，但是有什么类似的东西可以控制高度吗？
我找不到任何东西，如果没有，我该如何覆盖默认值？
问问题
63428 次
4 回答
53
我找不到任何东西，如果没有，我该如何覆盖默认值？
Bootstrap 的输入字段高度是使用属性选择器定义的，例如input[type="text"], input[type="password"]
您可以使用相同选择器格式的样式覆盖它，或者使用类等。
.mystyle input[type="text"] {
height: 14px;
font-size: 10px;
line-height: 14px;
}
于 2012-12-07T01:34:14.317 回答
32
根据 Bootstrap 文档：Bootstrap CSS，您应该使用.input-sm
如果您要编写自己的 CSS，您并没有真正利用 Bootstrap 的强大功能。
<input class="form-control input-sm" type="text" placeholder=".input-sm">
它只是改变了height@Neps 提到的属性
但是，我必须.input-sm在我自己的 CSS 中覆盖以正确调整大小。
我只是更喜欢尽可能使用 Bootstrap 类。
于 2014-05-30T15:59:15.077 回答
8
是的，有控制高度的类。您可以在此处阅读有关它们的信息。
input-lg
input-sm
于 2014-11-13T20:08:45.983 回答
2
我建议学习为您的引导文件使用 LESS 或 SASS 编译器，并与引导程序一起下载 LESS/SASS 文件。这不是很困难，并且确实是您“应该”自定义 Bootstrap 的方式。一两次调整可能有点笨拙，但对于整体配色方案或网格/输入控件间距和填充等问题，它确实要好得多，因为 LESS 变量是通用的，并且可能适用于你不会的东西不考虑覆盖。例如，您应该使用“form-control”类来装饰所有输入。“表单控制”和“输出”类在文件中定义：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...
}
所有变量都定义在一个易于使用的文件中，并且在那里所做的更改会影响一切。这是一个示例：
//== 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;
如果新版本的 BS 出现，您只需使用编译器将旧变量应用于新的 BS 文件。
链接： http: //getbootstrap.com/customize/
Visual Studio 用户： https ://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
于 2016-12-27T17:30:44.590 回答