Twitter Bootstrap网格堆叠问题

Question

晚上好，

我在网格系统方面遇到了一些麻烦，我在这里看到了一些指导。 以下面的代码为例：

    <div class="container">
           <div class="row"> <!-- PROBLEM -->

              <div class="col-md-12">
                  <div class="problemclass">

                  </div>
              </div>
          </div> <!-- /PROBLEM -->
      </div> <!-- /container -->
  </header>
  <main>
      <div class="container">
          <!-- WORKS -->
          <div class="row">
              <div class="col-md-4">
                    <div class="notproblem"> 
                        {CONTENT}
                    </div>
                       etc...    

正如您所看到的，我在标题中将一行标记为PROBLEM，它包含12列范围。问题类的CSS设置为大约300px高度和背景图像（它设置为300px，因为背景图像的高度为300像素）。代码如下所示：

.problemclass{
    height: 300px; 
    background: url('background.png'); 
}

所有内容都完美堆叠并完美排列......直到我调整浏览器大小以测试堆叠。此时，标记为PROBLEM的行将开始与标记为WORKS的行完全重叠;内容将与背景图像重叠，实际的div将在背景图像下面！我没有特别的线索为什么LOL！我的猜测是，也许我不能只有一个设定高度的背景，并期望它的工作？ 任何建议都会受到赞赏，我希望我足够清楚。

另请注意，在同一行的12列网格上方有2个6列网格，我没有包含这些网格，以保持代码更加干净和清晰。