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-类。