html - 所有移动设备上的右栏底部

我刚刚开始 Bootstrap 并尝试了解网格的确切工作原理

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 在桌面上

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

最佳答案

<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。您不需要向其中添加任何 float 。

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

关于html - 所有移动设备上的右栏底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37166595/