所有移动设备上的右列底部答案

【问题标题】：Right Column bottom on all mobile devices所有移动设备上的右列底部
【发布时间】：2016-05-11 15:04:40
【问题描述】：

我刚刚开始使用引导程序并试图了解网格的确切工作原理

HTML：

<div class="row">
 <div class="leftContainer  col-md-6">
 A
 </div>
  <div class="rightContainer  col-md-6">
 B
 </div>
</div>

CSS：

.leftcontainer{
  float:left;
}

.rightcontainer{
  float:right;
}

我不想在移动设备的底部出现滚动条。我的输出在移动设备上是这种格式

A

                    B

我想要

A

B

但A B 在桌面上

非常感谢任何帮助。谢谢！

【问题讨论】：

【解决方案1】：

<div class="row">
 <div class="leftContainer col-xs-12 col-md-6">
 A
 </div>
  <div class="rightContainer col-xs-12 col-md-6">
 B
 </div>
</div>

并删除您的 CSS。您不需要将浮点数添加到其中任何一个。

另外，请阅读 Bootstrap 文档中的网格系统。它有你需要的任何东西。 http://getbootstrap.com/css/#grid

【讨论】：

谢谢，它工作正常。但是在桌面上，如果我删除 float:right 左右列之间没有间隙。如何在两者之间添加空格？
从技术上讲，即使有浮动，你也没有空间（仅供参考，你的样式表中的类名是小写的，而在 HTML 中它们不是）。提供空间的一种方法是使两个 div 的宽度均为 49%，然后分别向左和向右浮动。