bootstrap，4 divs，2 columns。一列不浮动 [英] bootstrap, 4 divs, 2 columns. One column not floating right

问题描述

ppl可能更容易理解我的代码。

It may be easier for ppl to understand with my codepen.

http://codepen.io/KDweber89/ pen / LVddKK

基本上我有四个div。 （技术上5，但第五个是隐藏的，并设计为交换第三和第四div的顺序响应。）但是这4个div在两列。问题是，当右侧的顶部div变得比左侧的两个div组合更大（高度明显）时，右侧的底部div滑到左侧。然而，我只想要在左侧的白色空间，如果这种效果发生。

Basically I have four divs. (technically 5 but the fifth is hidden, and designed to swap the order of the 3rd and 4th div when responsive.) But these 4 divs are in two columns. The problem is that when the top div on the right side becomes larger (height wise) than the two divs on the left side combined, the bottom div on the right side slides over to the left side. However I just want white space on the left side if this effect happens.

这里是我的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; }

基本上，我希望操作div的时间保持在open ride

So essentially, I want the hours of operation div to remain underneath the 'open ride' div.

有人有任何想法吗？

推荐答案

$ c> col-sm-offset-8 到您的营业时间div，它应该做的。

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

这篇关于bootstrap，4 divs，2 columns。一列不浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！