bootstrap - 为什么我的行 class 不能展开以适应我的固定大小 div？

Question

好的，所以我这里有一个工作示例：http://www.bootply.com/16k8ngAUxF#

我的问题是：为什么我可以清楚地看到div content2，但看不到div content1？

<div class="container">

  <div class="row">
    <div class="col-md-2 hidden-xs">
    </div>
    <div class="col-md-10 col-xs-12" id="header-ads">
      <div>
        <div id="content1"></div>
      </div>
    </div>
  </div>

  <div class="row" id="header">

  </div>

  <div class="row">
    <div id="content2">
    </div>
  </div>

</div>

CSS

.container {
    background-color: lightgreen;
}
.row {
    background-color: pink;
    margin-bottom: 1px;
    border-bottom: 2px solid black;
  }
#content1 {
  margin: 4px;
  height: 40px;
  width: 40px;
  border: 2px solid lightblue;
  background-color: yellow;
}

#content2 {
  margin: 4px;
  height: 40px;
  width: 40px;
  border: 2px solid lightblue;
  background-color: yellow;
}

Answer 1

您的命名约定导致问题 id="header-ads" 这是被广告拦截器阻止的众多类之一。我目前正在使用 adguard，请参阅下面的 css 它插入到我网页的 <head> 中，您很可能也在使用一些广告拦截器。

#googlead, #gridAdSidebar, #head-ad, #header-ads, #headerAd, #headerAdContainer, #header_ad, #homead, #ka_adRightSkyscraperWide, #leaderAd, #leaderBoardAd, #leaderboard-ad, #leaderboard-advertisement, #leaderboardad, #left-ad, #left_ads, #leftad, #leftads, #logoAd, #logo_ad {
display: none!important;
}

bootstrap - 为什么我的行 class 不能展开以适应我的固定大小 div？

bootstrap - why won't my row class expand to fit my fixed-size div?

twitter-bootstrap

twitter-bootstrap-3