1

非常に大きな要素を持つフロント ページ用のフォームを作成したいので、いくつかのカスタム CSS クラスを定義するだけだと考えていますが、パディング、ラインなど、すべてを正確に拡大する方法に苦労しています。高さなどをフォントサイズに合わせます。

ラベルとテキストボックスを備えた水平フォームと、テキストサイズが 72px の送信ボタンを使用することを考えています。

それに応じてすべてをスケーリングする方法に関する詳細情報を入手できる場所はありますか、または誰かがヒントを教えてくれますか?

私が試していたのは：

input.real-large-input {
   font-size: 24px;
   padding: 14px 24px;
   width:270px;
   line-height:46px;
}

label.real-large-label {
   font-size: 24px;
   line-height:46px;
   font-weight:bold;
}

.real-large-btn {
   font-size: 24px;
   padding: 14px 24px;
}

しかし、 line-height と padding は実際には一種の構成であり、元のサイズに合わせてすべてを維持するためにどの値を使用すればよいかわかりません。実際には、元のブートストラップ CSS では、フォント サイズが 14 ピクセル、上下に 4 ピクセルのパディングがあり、行の高さが 20 ピクセルであるため、かなり混乱しています。

上記はこれらの値でうまく機能しますが、問題はこれよりもはるかに大きくスケーリングしたいということですが、フォントサイズのときにパディングと行の高さにどの値を入れるべきかわからないため、すべてが非常に面倒になります72pxです。

4

1 に答える 1

3

Bootstrap の入力の高さは固定されています。プロパティを に設定して、設定autoした font-size で適切にスケーリングできるようにすることをお勧めします。カスタム クラスを使用した簡単なデモを次に示しform-largeます。

http://jsfiddle.net/fpC4r/3/show/

.form-large{
    font-size: 60px;
}

.form-large .control-label{
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: normal;
}

.form-large input, .form-large  button{
    font-size: 60px;
    padding: 20px;
    height: auto;
    line-height: normal;
}
于 2013-08-26T05:03:50.347 に答える