1

我想为我的首页创建一个包含非常大元素的表单，所以我想我只是定义了一些自定义 css 类，但我正在努力解决我究竟是如何扩大所有内容的，例如填充、线条高度等以匹配字体大小。

我正在考虑使用带有标签和文本框的水平表单以及文本大小为 72 像素的提交按钮。

是否有任何地方可以获取有关如何相应地扩展所有内容的更多信息，或者任何人都可以给我一些提示？

我正在尝试的是：

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 像素，并没有相加。

以上在这些值上工作得很好，但问题是我想缩放比这大得多，但这一切都变得非常混乱，因为我不知道在字体大小时我应该为填充和行高设置什么值是 72 像素。

4

1 回答 1

3

Bootstrap 的输入具有固定的高度，我建议您将属性设置auto为让它们与您设置的字体大小一起正确缩放。这是一个带有自定义类的简单演示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 回答