Question

我有一个在Twitter Bootstrap上制作的结构，你可以在这里看到： http://codepen.io/DiV666/pen/zBxdmw

问题是包含h1（TITLE）和h2（Subtitle）的行之间有很多空格。此空间取决于左侧菜单，如果删除或添加选项，此空间将变大或变小。

要解决此问题，我在overflow: hidden;中设置#page-content，但我不知道这是否是最好的方式。

有人可以帮忙吗？

谢谢。

Answer 1

将overflow: hidden;添加到.row类

.row {
    margin-right: -15px;
    margin-left: -15px;
    overflow: hidden;
}

Answer 2

添加内部风格，如下所示：

 #page-content  .container-fluid .row::after
 {
     display: initial ;
 }
 #page-content  .container-fluid::after
 {
     display: initial ;
 }

如果不起作用，请指定！important ;

Answer 3

这是由.row:after引起的。只需将其设置为initial，否则它将从其父级继承表格显示：

.container-fluid .row:after{
  display: initial;
}

Answer 4

将两个标记放在同一行：

  <div class="row">
     <div class="col-md-12">
        <h1>TITLE</h1>
       <h2>Subtitle</h2>
     </div>
  </div>

如果你想要一个固定的侧边栏，所以它不依赖于page-content的内容，使其位置固定：

#page-sidebar {
    width: 240px;
    padding: 0;
  position:fixed;
  min-height: 100%;
}