当移动设备在引导程序3中的水平/垂直视图之间定向时，col-xs- *不起作用

Question

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

我正在使用以下代码进行移动..

 <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％）共享。

但我希望在移动水平视图中获得3个div块。垂直视图中的2个块..

为此我也试过下面的代码。但没有使用...

  <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的ref：

请帮助我..

Answer 1

您需要调整col-sm-x类的断点。在bootstraps CSS文件中，您将找到如下行：

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

将768px更改为您希望断点的位置，其中col-xs-x类会覆盖这些类。