4

Twitter Bootstrap とそのフォーム コンポーネントを使用しています。

http://twitter.github.com/bootstrap/base-css.html#forms

2 つのコンポーネント間の垂直距離を縮め、さらに小さくするにはどうすればよいですか?

例: 上記のリンクの「検証状態」で、「警告のある入力」行と「エラーのある入力」行の間のギャップを減らすにはどうすればよいですか? また、テキスト入力の高さを減らすにはどうすればよいですか?

4

2 に答える 2

4

ラベルを入力に近づけたい場合は、幅を変更する必要があります。

.form-horizontal .control-label {
    width:160px;
}

入力の高さを変更するには、このセレクターの「高さ」プロパティを変更する必要があります。

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
   height:20px;
}

行間の高さを減らすには、行の余白を変更する必要があります。

.form-horizontal .control-group {
    margin-bottom:20px;
}

これらは、bootstrap.css で使用されるデフォルトのスタイルです。これらをオーバーライドしたい場合は、ページに最上位クラスを設定することをお勧めします。このようにして、bootstrap.css ファイルを書き換えずにデフォルトを上書きできます...

于 2012-10-17T20:13:00.180 に答える
3

フォームの検証では、CSSでこのルールを変更します

.form-horizontal .control-group {
  margin-bottom: 20px;
}

これらを見つけるには、Chrome（またはFirebugを搭載したFirefox）で、上のリンクの要素を右クリックします。リストから検査要素を選択します。次に、開いたプロパティインスペクターで（[要素]タブで、変更する属性を示すアイテムが見つかるまでアイテムにカーソルを合わせます。この場合は、「コントロールグループの警告」クラスのダイビングでした。その要素をクリックして、インスペクターの右側に、関連するCSSルールが表示されます。その後、CSSを検索してルールを修正できます。また、インスペクターで実際に変更して、検査しているページで結果をライブで確認することもできます。

于 2012-10-17T20:14:23.860 に答える