我正忙着为客户提供一个网站。到目前为止,一切都很顺利,直到移动/平板电脑设计。这是一个例子
这是MD版本。
----------------- ------------------
| Left Content | | Right Content | <-- Float: Right and Margin-right -15
----------------- ------------------
这是现在的XS版本
------------------
| left Content |
--------------------
| Right Content|
------------------
我想要的XS版本
-----------------
| left Content |
-----------------
| right Content |
-----------------
我能解决这个问题的唯一方法就是为“正确的内容”禁用浮动权限,这样它就会精确地叠加在一起。但是如果它在.MD模式下我没有间距和正确的顺序。
我尝试了以下内容:
偏移 - XS- * 向左拉 向右拉 向左推 向右推
有没有人可以帮助我度过难关?
我上传了网站
答案 0 :(得分:0)
如果您专门浮动元素,请尝试插入辅助类&#34; clearfix&#34;到父div。
<div class="row clearfix">
答案 1 :(得分:0)
我添加了尽可能小的列布局,在md
上显示彼此相邻的列,并将它们堆叠在xs
和sm
上。
很可能这并不能完全回答这个问题,因为你的评论表明你需要一些间距。框内的文本目前每边都有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>