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”

Answer 2

按如下方式编辑css，

.mycolumn{
  float: left;
position: relative;
display: table-cell;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 3px;
padding-top: 16px;
width: 37%;
}

CSS - Bootstrap自动填充？

2 个答案: