当移动设备在bootstrap 3中的水平/垂直视图之间定向时，col-xs- *不起作用 [英] col-xs-* not working when mobile is orienting between horizontal/vertical view in bootstrap 3

问题描述

在Bootstrap 3中，我对移动设备使用col-xs- *时遇到了问题.

I'm having a problem in Bootstrap 3 in using col-xs-* for mobile devices..

我正在将以下代码用于移动设备.

I'm using below code for mobile..

 <div class="row">
    <div class="col-xs-6"> div content 1 </div>
    <div class="col-xs-6"> div content 2 </div>
    <div class="col-xs-6"> div content 3 </div>
    <div class="col-xs-6"> div content 4 </div>
    <div class="col-xs-6"> div content 5 </div>
    <div class="col-xs-6"> div content 6 </div>
 </div>

在这里，两个移动水平"/垂直"视图中的div均分(50％).

here, div's are equally(50%) sharing in both Mobile Horizontal/Vertical views..

但是我想在移动水平"视图中获得3个div块；垂直视图中2个块.

But I want to get 3 div blocks in mobile Horizontal view & 2 blocks in Vertical view..

为此，我也尝试了下面的代码.但是没有用...

for this I tried below code also. But no Use...

  <div class="row">
    <div class="col-xs-6 col-sm-4"> div content 1 </div>
    <div class="col-xs-6 col-sm-4"> div content 2 </div>
    <div class="col-xs-6 col-sm-4"> div content 3 </div>
    <div class="col-xs-6 col-sm-4"> div content 4 </div>
    <div class="col-xs-6 col-sm-4"> div content 5 </div>
    <div class="col-xs-6 col-sm-4"> div content 6 </div>
 </div>

请在jpg的下方检查是否存在引用:

please check below jpg's for ref:

请帮助我.

推荐答案

您需要调整col-sm-x类的断点.在bootstraps CSS文件中，您会找到类似以下内容的行:

You need to adjust the break point for the col-sm-x classes. In bootstraps CSS file, you will find a line like:

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, ....

将768px更改为您想要将这些类替换为col-xs-x类的断点的任何地方.

Change the 768px to wherever you want the break point where those classes to be overridden by the col-xs-x classes.

这篇关于当移动设备在bootstrap 3中的水平/垂直视图之间定向时，col-xs- *不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！