引导嵌套的行和列不正确堆叠

<div class="container" id="dashboardContainer"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-wheel" id=""> 
      Col 1-1 
      </a> 
     </div> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-calendar" id="viewFutureBookings"> 
     Col 1-2 
      </a> 
     </div> 

     <div class="col-md-4 col-sm-12"> 
      <div class="row"> 
       <div class="col-sm-6 col-md-12 margin-bottom-30"> 
        <a href="#" class="sm img-compass" id=""> 
         Col 2-1 
        </a> 
       </div> 
       <div class="col-sm-6 col-md-12"> 
        <a href="#" class="sm img-present" id="referAFriend"> 
Col 2-2 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

，当你正在查看md和lg伟大的工程。但问题是当你进入sm布局时，它会正确放置，但不允许你点击第一排按钮。

我找到的解决方案是删除嵌套的行，但是由于页边空白/填充不存在，所以它破坏了我的布局。

这类问题的建议解决方案是什么？

来源

2016-02-16 AndrewC

对我工作的罚款 – NooBskie

@NooBskie，安德鲁表示768px之间992px视......似乎没有被工作在Chrome上也是。 –

@DavidWilkinson没错。它不适用于该视口大小。它似乎是因为第三列内嵌的行，但我不知道如何正确解决它。 – AndrewC

我做了以下内容：

#dashboardContainer a { 
    background: red; 
    display: block; 
    border: 1px solid blue; 
    color: white; 
    position: relative; /* Add Position */ 
    z-index: 1; /* Add Stack Order */ 
}

当使用嵌套项目我经常使用的z-index来帮助管理元素的堆叠顺序。

复审：

我建议您更新引导CSS文件到最新版本，因为它似乎它可能在某些浏览器中的错误使用V3.0.0时

我改变了这种到v3.1.0及更高版本，行问题不再是一个问题。

来源

2016-02-16 10:54:59 tohood87

没问题@AndrewC，很高兴它做到了这个把戏:) – tohood87

虽然我同意这个解决方案的工作原理，但它并没有解决嵌套行继承整个父行的整个高度的根本问题......它也没有解决问题， t似乎是“未来证明”。例如，如果嵌套的行/列中包含的内容发生变化，并且不再是锚点元素，而是按钮。或者只是静态文本等... –

嗨大卫，我完全同意你在这方面。进一步审查后，看起来最好的解决办法是更新到更新版本的Bootstrap CSS。看起来这可能是使用3.0.0的Chrome中的一个错误 - 高于3.1.0的任何东西似乎已经消除了这个问题。感谢评论我会确保将来的任何答案我尽可能给予答案。干杯 – tohood87

为2-1和2-2的cols你应该改变这样的

<div class="row"> 
<div class="col-sm-6 col-md-6 margin-bottom-30"> 
<a href="#" class="sm img-compass" id=""> 
Col 2-1 
</a> 
</div>

代码做同样为2-2

来源

2016-02-16 10:57:26

您需要添加float: left到包装嵌套行的div（我已添加类nested，以便您可以更轻松地看到。

在这里工作：http://codepen.io/samuidavid/pen/JGzwXB

<div class="container" id="dashboardContainer"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-wheel" id=""> 
      Col 1-1 
      </a> 
     </div> 
     <div class="col-md-4 col-sm-6 margin-bottom-30"> 
      <a href="" class="lg img-calendar" id="viewFutureBookings"> 
     Col 1-2 
      </a> 
     </div> 

     <div class="col-md-4 col-sm-12 nested"> 
      <div class="row"> 
       <div class="col-sm-6 col-md-12 margin-bottom-30"> 
        <a href="#" class="sm img-compass" id=""> 
         Col 2-1 
        </a> 
       </div> 
       <div class="col-sm-6 col-md-12"> 
        <a href="#" class="sm img-present" id="referAFriend"> 
Col 2-2 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

@media (min-width: 768px) and (max-width: 992px) { 
    .nested { 
    float: left; 
    } 
}

来源

2016-02-16 11:06:07

问题浮动。你有一块巨大COL-SM-12盖前面的两个块

解决http://codepen.io/anon/pen/eJXbde

@media (min-width: 992px) { 
    .col-sm-12 { 
     clear: none; 
    } 
} 
@media (min-width: 768px) AND (max-width: 992px) { 
    .col-sm-12 { 
     clear: left; 
    } 
}

来源

2016-02-16 11:11:45 BOLVERIN

引导嵌套的行和列不正确堆叠

回答

相关问题