引导响应列布局堆积列 [英] Bootstrap responsive column layout stacking columns

问题描述

我正在构建一个网格结构，我已经改变了bootstrap容器类到新的维度，这是工作正常。我目前正试图实现下面的布局，并得到了这么远。每列都有一个背景图片。我试图把另一个col-md-3在黑色部分，但没有运气。有任何建议吗？

我的HTML

 < div class =container> 
< div class =row> 
< div class =col-sm-6 col-sx-6 col-md-3 col-lg-3 boats-row> 
< / div> 
< div class =col-md-3 home-row-red> 
< / div> 
< div class =col-md-6 col-sm-12 home-row-big> 
< / div> 
< / div> 
< / div> 
  

CSS

  .boats-row {
 max-height：720px; 
 height：100％; 
 height：720px; 
 background：url（img / boats.png）; 
 background-size：cover; 
} 
 
 .home-row-red {
 height：360px; 
 background：red; 
 max-height：360px; 
} 
 
 .home-row-big {
 height：720px; 
 max-height：720px; 
 background：url（img / panel-large.png）; 
 background-size：cover; 
} 
  

解决方案

/ p>

 < div class =row> 
 
< div class =col-sm-12 col-md-6> 
< div class =col-sx-6 col-sm-6 col-md-6 boats-row> 
 
< / div> 
 
< div class =col-sx-6 col-sm-6 col-md-6 home-row-red> 
 
< / div> 
 
< div class =col-sx-6 col-sm-6 col-md-6 home-row-blue> 
 
< / div> 
< / div> 
 
< div class =col-md-6 col-sm-12 home-row-big> 
 
< / div> 
 
< / div> 
  

> / p>

I'm building a grid structure and I have changed the bootstrap container classes to new dimension which is working fine. I am currently trying to achieve the layout below and have gotten this far. Each column has a background image. I am trying to put another col-md-3 in the black section but have had no luck. Any suggestions?

My HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 boats-row">
        </div>
        <div class="col-md-3 home-row-red">
        </div>
        <div class="col-md-6 col-sm-12 home-row-big">
        </div>
    </div>
</div>

CSS

.boats-row {
    max-height: 720px;
    height: 100%;
    height: 720px;
    background: url(img/boats.png);
    background-size: cover;
}

.home-row-red {
    height: 360px;
    background: red;
    max-height: 360px;
}

.home-row-big {
    height: 720px;
    max-height: 720px;
    background: url(img/panel-large.png);
    background-size: cover;
}

解决方案

And something like this?

<div class="row">

    <div class="col-sm-12 col-md-6">
        <div class="col-sx-6 col-sm-6 col-md-6  boats-row   ">

        </div>

        <div class="col-sx-6 col-sm-6 col-md-6 home-row-red">

        </div>

        <div class="col-sx-6 col-sm-6 col-md-6 home-row-blue">

        </div>
    </div>

    <div class="col-md-6 col-sm-12 home-row-big">

    </div>

</div>

这篇关于引导响应列布局堆积列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！