40

私のフォームでは、入力フィールドの高さを低くしたいと思います。

入力フィールドの幅を制御するinput-small、input-mediumクラスがあることは知っていますが、高さを制御するために似たようなものはありますか？

何も見つかりませんでした。見つからない場合は、デフォルトをオーバーライドするにはどうすればよいですか？

4

4 に答える 4

53

何も見つかりませんでした。見つからない場合は、デフォルトをオーバーライドするにはどうすればよいですか？

ブートストラップの入力フィールドの高さは、属性セレクターを使用して定義されます。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 doc：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をカスタマイズするために「想定される」方法です。1つまたは2つの微調整には少し手間がかかるかもしれませんが、全体的な配色やグリッド/入力コントロールの間隔やパディングなどの場合、LESS変数はユニバーサルであり、あなたがしないものに適用される可能性があるため、実際にははるかに優れています。オーバーライドすると思います。たとえば、すべての入力を「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...
  }

すべての変数は単一のファイルで定義されており、そこで行われた変更はすべてに影響します。サンプルは次のとおりです。

//== 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

于 2016-12-27T17:30:44.590 に答える