css - 对齐底部以使 Bootstrap 不起作用

Question

我正在使用 Bootstrap，需要将一列垂直对齐到底部。它只是不工作。谁能帮忙？

HTML:

<div class="container-fluid">
    <div class="row">
    <div class="col-md-8">
    <div><span id='Name' class="response"></span> <span id='Country' class="response"></span></div>
    <div id="vidspace"></div>
    </div><!--end  col-md-8--></!--end>
    <div class="col-md-4 vbottom">
    <table id="personInfo">
    <tr><td>Age:</td><td id='Age' class="response"></td></tr>
    <tr><td>Neighborhood:</td><td id='Neighborhood' class="response"></td></tr>
    <tr><td>Distance from Home:</td><td id='fromHome' class="response"></td></tr>
    <tr><td>Occupation:</td><td id='Occupation' class="response"></td></tr>
    </table>
    </div><!--end  col-md-4--></!--end>
    </div><!--end row --></!--end>
</div>

CSS:

#person_wrapper {
    display: none;
    position: absolute;
    left: 0;
    top: 10%;
    z-index: 10;
    border-radius: 5px;
    background-color: white;
    padding: 20px;

    height: auto;
}

.vbottom {
    display: table-cell!important;
    vertical-align: bottom!important;
}

Answer 1

verticle-align 的 bottom 值将元素与底部元素对齐。所以它在技术上已经处于底部。

如果你想把它移到你的窗口下，一种方法是:

.vbottom {
    position:relative;
    margin-top:50%;
}

如果你能澄清你想要什么，我就能给你一个更好的答案。