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>

问题在于移动设备。

OUTPUT - 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]

[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不兼容

2 个答案: