Question

我正在努力缩短引导行（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;
}

Answer 2

div class="table-form"上的高度无法通过直接在该元素上放置高度来控制。每个td内的填充是决定整体高度的因素。缩小衬垫，你会看到一张看起来较小的桌子。

如果您想保持表格行的高度不变，可以在overflow:scroll;上添加div class="table-form"样式。

在Bootstrap中更改行高

2 个答案: