bootstrap col-md-4 和 col-xs-6 不兼容

Question

我有 3 列用于中等屏幕 (col-md-4)。我还使用 col-xs-6 为移动设备设置 2 列

示例代码

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

问题出在移动设备上。

输出 - col-md-4 和 col-xs-6

[col-xs-6][col-xs-6]

[col-xs-6]

[col-xs-6][col-xs-6]

[col-xs-6]

期望输出

[col-xs-6][col-xs-6]

有没有办法解决这个问题。

谢谢

样本工作

Link

Answer 1

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

Answer 2

在bootstrap 4及以上你可以使用：

<div class="container">
        <div class="row">
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>    
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>
            <div class="col-md-4 col-6">CONTENT</div>
        </div>
 </div>

bootstrap col-md-4 和 col-xs-6 不兼容

bootstrap col-md-4 and col-xs-6 not compatible

col

twitter-bootstrap