Question

ppl可能更容易理解我的codepen。

基本上我有四个div。（技术上5，但第五个是隐藏的，设计用于在响应时交换第3和第4个div的顺序。）但是这4个div分为两列。问题是，当右侧的顶部div变得比左侧的两个div更大（高度方向）时，右侧的底部div滑到左侧。但是如果这种效果发生，我只想在左侧留出空白区域。

这是我的HTML

<div class="col-xs-12 col-sm-8 start">Start ride For</div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 conditions ">rides We have</div>
<div class="col-xs-12 col-sm-4 pull-right hours">Hours of Operation</div>

这是我的css

.start { height: 50px; background: #fcc; }
.open { height: 250px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.hidden { height: 50px; }
.conditions { height: 150px; background: #cfc; }

基本上，我希望操作小时数保持在开放式驾驶之下。格。

有人有什么想法吗？

Answer 1

Apply col-sm-offset-8 to your Hours of Operations div and it should do the trick.

bootstrap，4 divs，2列。一列不向右浮动

1 个答案: