在移动视图中在引导上操纵列和行

问题描述

我有两行三列这样

移动视图

，但是当我改用移动视图时，它们就像这样

如何处理行和列？
感谢。

解决方案

可能是使用两行，这就是为什么得到这个结果。将它们全部置于一行中，并为特殊大小添加修复。

 <！ - 列在移动设备上以50％的宽度开始，在桌面设备上的宽度增加到33.3％ - > 
< div class =row> 
< div class =col-xs-6 col-md-4> 1< / div> 
< div class =col-xs-6 col-md-4> 2< / div> 
 
< div class =clearfix visible-xs-block>< / div> <！ - 它适用于移动视图 - > 
 
< div class =col-xs-6 col-md-4> 3< / div> 
 
< div class =clearfix visible-md-block>< / div> <！ - 它适用于桌面视图 - > 
 
< div class =col-xs-6 col-md-4> 4< / div> 
 
< div class =clearfix visible-xs-block>< / div> <！ - 它适用于移动视图 - > 
 
< div class =col-xs-6 col-md-4> 5< / div> 
< div class =col-xs-6 col-md-4> 6< / div> 
< / div> 
  

现在，您将有：

[1] [2] [3]

[4] [5] [6]查看和

[1] [2]

[3] [4]

[5] [6]

移动视图。

I have two rows and three columns like this

I want they look like this when I change to mobile view

I've tried it, but when I change to mobile view, they turn out like this

how to manipulate row and column?Thanks.

解决方案

Probably, you are using two rows that's why you are getting this result. Put all of them in one row and add clearfixes for special sizes.

<!-- columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">1</div>
  <div class="col-xs-6 col-md-4">2</div>

  <div class="clearfix visible-xs-block"></div> <!-- It works on mobile view -->

  <div class="col-xs-6 col-md-4">3</div>

  <div class="clearfix visible-md-block"></div> <!-- It works on desktop view -->

  <div class="col-xs-6 col-md-4">4</div>

  <div class="clearfix visible-xs-block"></div> <!-- It works on mobile view -->

  <div class="col-xs-6 col-md-4">5</div>
  <div class="col-xs-6 col-md-4">6</div>
</div>

Now, you will have:

[1] [2] [3]

[4] [5] [6]

for desktop view and

[1] [2]

[3] [4]

[5] [6]

for mobile view.

这篇关于在移动视图中在引导上操纵列和行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！