Bootstrap xs订购vs md订购

时间:2015-06-06 07:56:42

标签: css twitter-bootstrap

我正忙着为客户提供一个网站。到目前为止,一切都很顺利,直到移动/平板电脑设计。这是一个例子

这是MD版本。

-----------------  ------------------
| Left Content  |  |  Right Content | <-- Float: Right and Margin-right -15
-----------------  ------------------

这是现在的XS版本

------------------
| left Content  |
--------------------
  | Right   Content| 
  ------------------

我想要的XS版本

-----------------
| left Content  |
-----------------
| right Content |
-----------------

我能解决这个问题的唯一方法就是为“正确的内容”禁用浮动权限,这样它就会精确地叠加在一起。但是如果它在.MD模式下我没有间距和正确的顺序。

我尝试了以下内容:

偏移 - XS- * 向左拉 向右拉 向左推 向右推

有没有人可以帮助我度过难关?

我上传了网站

http://www.clbmedia.nl

2 个答案:

答案 0 :(得分:0)

如果您专门浮动元素,请尝试插入辅助类&#34; clearfix&#34;到父div。

<div class="row clearfix">

答案 1 :(得分:0)

我添加了尽可能小的列布局,在md上显示彼此相邻的列,并将它们堆叠在xssm上。

很可能这并不能完全回答这个问题,因为你的评论表明你需要一些间距。框内的文本目前每边都有15px。你或许是指背景颜色之间的空间吗?

.pink {
  background-color: #f99;
}

.green {
  background-color: #9f9;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col-md-6 pink">Left Content</div>
    <div class="col-md-6 green">Right Content</div>
  </div>
</div>