我正在努力缩短 Bootstrap 行的高度 (class="table-form"
)。我已经尝试了一些东西,但只成功地改变了行的宽度,而不是高度。到目前为止我已经尝试过:
.table-form {
position: absolute;
width: 100%;
height: 70%;
}
.table-form {
position: absolute;
width: 100%;
height: 70%;
display: inline-block;
}
以及设置
html, body {
height: 100%;
}
出于某种原因,我只成功地改变了宽度。如何成功缩短整行及其内容的高度,同时仍保持所有内容居中?
这里是 JS Fiddle 的链接(它可能不会以内联方式显示,但所有内容都应该在同一行/行上):http://jsfiddle.net/j7z3845t/
如有任何关于如何调整行/内容高度的建议,我将不胜感激。
最佳答案
要使用基于百分比的高度,所有父元素都必须定义一个高度。在下面的 CSS 中,我向 #container div 添加了 100% 的高度。为了测试目的,我还将要更改其高度的行的背景色设置为红色。这样您就可以轻松查看 CSS 的效果。
html, body {
height: 100%;
}
#container {
height: 100%;
}
body {
position: relative;
width: 100%;
font-family: 'Montserrat', sans-serif !important;
color: #CCFF66 !important;
background: url(blackboard.jpg) no-repeat center;
background-size: cover;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
font-size: 1.5em !important;
}
.table-form {
position: absolute;
width: 100%;
height: 70%;
display: inline-block;
background: red;
}
#header {
padding: 30px !important;
}
#header h1 {
font-family: 'Vast Shadow', cursive !important;
}
#first,
#last,
#phone,
#quant { /* Change error color message to red*/
color: red;
}
h1 {
text-align: center;
font-family: 'Lobster', cursive !important;
font-size: 3em !important;
}
/* DISCOUNT TABLE */
#discount-table {
}
th {
font-size: 1.4em;
}
.table th, td { /* Table Style */
text-align: center;
padding: 25px 15px !important;
}
/* DIVIDER IMAGE */
#divider {
text-align: center !important;
}
#divider img {
padding-top: 20px;
}
/* ORDER FORM */
#order-form {
}
.center { /* Center and condense form */
margin: 0 auto;
height: 50%;
width: 70%;
}
label {
margin-bottom: 0px !important;
}
.form-group {
margin-bottom: 2px !important;
}
#submit-button {
text-align: center;
}
.btn {
background-color: #C2C2FF !important;
}
.btn-default:active {
background-color: #A3A3FF !important;
}
/* CUSTOM PRICE RESULT ON SUBMIT */
#result {
color: #C2C2FF !important;
text-align: center;
font-family: 'Lobster', cursive !important;
font-size: 3em !important;
letter-spacing: 6px !important;
}
关于html - 在 Bootstrap 中更改行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33153562/