html - CSS - Bootstrap 自动填充？

Question

我正在尝试使用 Bootstrap 设计网页样式。这是我的代码:

<div class="row">
    <div class="table-row">
        <div class="mycolumn" id="sidebar">

            <div class="list-group">
                    <div class="list-group-item"><input type="text" class="form-control" /></div>
                    <div id="mainmenucontentdiv" class="list-group-item">
                        <div>
                            <a class="list-group-item" href="#">Temporibus sit</a>
                            <a class="list-group-item" href="#">Deserunt consequuntur</a>
                            <a class="list-group-item" href="#">magni nesciunt</a>
                            <a class="list-group-item" href="#">lorem bla </a>
                        </div>
                    </div>
                </div> 
            </div>

            <div id="contentarea" class="mycolumn">
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero molestiae ipsam fuga excepturi, ullam illum iste non culpa et beatae, aut, cupiditate vitae voluptatibus explicabo magni tempora impedit saepe inventore.</div>
           </div>
     </div>
 </div>

CSS:

#sidebar{
    background-color: red;
    padding: 20px 0px 0px;
    width: 250px;
}
.mycolumn{
    display: table-cell;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}
#mainmenucontentdiv {
    overflow: hidden;
    padding: 0;
}
.table-row{
    display: table-row;
}

为了更好地查看示例，您可以在此处查看:http://jsfiddle.net/pkctb8uc/

为什么#contentarea中的内容被下推了？如您所见，顶部有一个很大的空白区域。我该如何解决？

Answer 1

因为您使用了 display: table-cell，要解决这个问题只需在 .mycolumn 中添加“vertical-align: top”