CSS-Bootstrap自动填充？

user1995781 发表于 Dev

用户1995781

我正在尝试使用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被下推？如您所见，顶部有一个很大的空白区域。我该如何解决？

静音

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。