css - Bootstrap 3 使右列在左列下方移动

Question

我使用的是 Bootstrap 3，我有 2 列彼此相邻，但我想在屏幕变小时将右列移动到左列下方。

我的情况如下；

<div class="container">
    <div class="row">

        <div class="col-xs-12">

            <div class="row">

                <div class="col-xs-8">
                    This is the left column
                </div>

                <div class="col-xs-4">
                    This is the right column
                </div>

            </div>

        </div>

    </div>
</div>

任何帮助将不胜感激:)

Answer 1

原因是当屏幕变小时不会移动是因为您正在使用 col-xs- 类。这告诉 bootstrap 在最小的屏幕和更大的屏幕上将它们并排显示。

此外，您不需要额外的行来完成您正在做的事情。

下面是如何使用 col-md- 类在任何介质或更大屏幕上将它们并排显示:

<div class="container">
    <div class="row">

        <div class="col-md-8">
            This is the left column
        </div>

        <div class="col-md-4">
            This is the right column
        </div>

    </div>

</div>

如果您想在大屏幕上将它们并排显示并堆叠在任何较小的屏幕上，您可以使用 col-lg- 类。