Twitter 引导布局

Question

我想知道是否有人可以帮助我弄清楚如何使用引导程序创建以下布局。

大屏幕的布局是：

然后对于小屏幕，布局将是：

基本上，红色会有一个图像（红色框的全高）与框（黄色）重叠。黄色框将与蓝色框具有相同的高度。然后在移动设备上，所有四个盒子都会堆叠在一起。

我在这里玩过代码： http://www.bootply.com/6N3RHao0CI

如果有人可以帮助我，将不胜感激！ :-)

谢谢

Answer 1

嗯，花了我一点时间，但后来我发现我的媒体查询比我正在查看的屏幕尺寸要小。原来我一直都有解决方案。当然，媒体大小设置为我正在篡改的内容，因此请务必将其更改为引导大小。 设置将不得不稍作更改，但想法就在那里。

这是使用的代码：Bootply link

我给 div 命名为 floater 并给它下面的 CSS：

@media(min-width: 1000px) {
  .floater {
    right: 34%;
    position: absolute;
  }
}

@media(max-width: 999px) {
  .floater {
    position: relative;
    right: 0px !important;
  }
}

Answer 2

使用纯引导。为了演示添加了一些 CSS。

演示：http://jsfiddle.net/arshadmuhammed/bkogj3wn/6/
（请不要忘记在小提琴中调整输出屏幕的大小）

HTML

<div class="col-md-10">
    <div class="col-md-8 col-md-offset-4 hidden-sm hidden-xs"></div>
</div>
<div class="col-md-12 hai2 hidden-md hidden-lg"></div>
<div class="col-md-2 col-xs-6"></div>
<div class="col-md-2 col-xs-6 hai"></div>

CSS

.col-md-10{
    background:url('http://images.all-free-download.com/images/graphiclarge/blue_abstract_background_310971.jpg');
    background-size:cover;
    height:200px;
    padding-right:0px!important;
}
.col-md-8{
    background:yellow;
    height:100px;
}
.col-md-2{
    background:blue;
    height:100px;
}
.hai{
    background:green;
    height:100px;
}
.hai2{
    background:yellow;
    height:100px;
}

Answer 3

Bootstrap 网格并不是真正为这种设计模式（等高和所有）而设计的。如果您想要在右侧具有等高文本框的流畅内容（对于较大的视口），我会使用 display:table 和 table-cell 自己滚动。

演示：https://jsbin.com/hufasa

HTML

<div class="hero-feature">
   <div class="hero-image">
      <div class="intro-text">Text box</div>
   </div>
   <!-- /.hero-image -->
   <div class="feature-box-wrapper">
      <div class="feature-box blue">
         <div>text</div>
      </div><!-- /.feature -->
      <div class="feature-box green">
         <div>text</div>
      </div><!-- /.feature-box -->
   </div><!-- /.feature-box-wrapper -->
</div><!-- /.hero-feature -->

CSS

.hero-feature .hero-image {
    background-image: url(http://placekitten.com/g/500/500);
    background-size: cover;
    background-position: center top;
    padding-top: 50%;
}
.hero-feature .intro-text {
    background: gold;
    padding: 5%;
}
.hero-feature .feature-box {
    padding: 5%;
    color: #fff;
    float: left;
    width: 50%;
}
.hero-feature .blue {
    background-color: blue
}
.hero-feature .green {
    background-color: green
}
@media (min-width:768px) { 
    .hero-feature {
        display: table;
        width: 100%;
    }
    .hero-feature .intro-text {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5%;
        width: 70%;
    }
    .hero-feature .hero-image {
        display: table-cell;
        background-image: url(http://placekitten.com/g/500/500);
        background-size: 100.5%;
        /*disquise the rounding errors in many browsers */
        background-position: center center;
        height: 400px; /*height of the image*/
        padding: 0;
        position: relative;
    }
    .hero-feature .feature-box-wrapper {
        display: table-cell;
        width: 30%;
    }
    .hero-feature .feature-box {
        display: table;
        height: 50%; /* half the height of the .hero-image */
        width: 100%;
        vertical-align: middle;
        float: none;
    }
    .hero-feature .feature-box > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}

所有视口大小不共享的所有内容都超出了媒体查询。