html - 在 Bootstrap 中更改行高

Question

我正在努力缩短 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/

如有任何关于如何调整行/内容高度的建议，我将不胜感激。

Answer 1

要使用基于百分比的高度，所有父元素都必须定义一个高度。在下面的 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;
}