Question

在我的表单中，我想减少输入字段的高度。

我知道有一些输入小的输入媒体类可以控制输入字段的宽度，但有没有类似控制高度的东西？

我找不到任何内容，如果没有，我怎么去覆盖默认值？

Answer 1

我找不到任何内容，如果没有，我怎么去覆盖默认值？

Bootstrap的输入字段高度是使用属性选择器定义的，例如： input[type="text"], input[type="password"]

您可以使用相同选择器格式的样式覆盖它，或使用类等。

.mystyle input[type="text"] {
   height: 14px;
   font-size: 10px;
   line-height: 14px;
}

Answer 2

根据Bootstrap文档：Bootstrap CSS，您应该使用.input-sm

如果您要编写自己的CSS，那么您并没有真正利用Bootstrap的强大功能。

<input class="form-control input-sm" type="text" placeholder=".input-sm">

它只是更改了@Neps

所提及的height属性

但是，我必须覆盖我自己CSS中的.input-sm才能正确调整大小。

我更喜欢尽可能使用Bootstrap类。

Answer 3

是的，有控制身高的课程。您可以阅读here。

input-lg
input-sm

Answer 4

我建议学习使用LESS或SASS编译器作为引导文件，并下载LESS / SASS文件和Bootstrap。这并不是很困难，而且确实是你的方式＆＃34;假设＆＃34;自定义Bootstrap。对于一两次调整可能有点笨拙，但是对于像整体颜色方案或网格/输入控制间距和填充这样的东西，它实际上要好得多，因为LESS变量是通用的并且可能适用于你不会＆＃ 39; t想要覆盖。例如，您应该使用＆＃34; form-control＆＃34;来装饰所有输入。类。＆＃34;表格控制＆＃34;和＆＃34;输出＆＃34;类在文件中定义：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/

http://lesscss.org/

Visual Studio用户： https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

减少Twitter Bootstrap输入字段的高度？

4 个答案: