如何在宽度为320时更改引导列

Question

我有以下HTML代码：

<div class="col-md-12" style="margin-top:100px;text-align:center;">
    <div class="col-md-1">
    </div>
    <div class="col-md-3">
        <span>TEXT</span></a>
    </div>
    <div class="col-md-3">
        <span>TEXT1</span></a>
    </div>
    <div class="col-md-4">
        <span>TEXT2</span></a>
    </div>
</div>

此代码在一行中水平生成3个跨度，如下所示：

TEXT     TEXT1     TEXT2   

我想在视图宽度为320px时执行响应代码。我希望跨度垂直排列：

TEXT
TEXT1
TEXT2

我如何实现这一目标？

Answer 1

您必须指定不同屏幕尺寸的宽度。您已指定列的md宽度。 如果您希望列在超小屏幕（＆lt; 320px）上使用全宽，则必须添加类col-xs-12。

<div class="col-xs-12 col-sm-6 col-md-3">
    <span>TEXT</span></a>
</div>

在上面的示例中，div将在超小屏幕上使用全宽，在小屏幕上使用半宽，在中等屏幕尺寸（和更大）上使用25％宽度（如您所有）。