Question

我目前有：

        <div class="row">
            <div class="col-xs-4" id="LocationWrapper">
                <div class="FullWidth HorizontallyCentered">Select the location:</div>
                <select id="ddlLocation"></select>
                <span id="LocationNote">blablabla</span>
            </div>
            <div class="col-xs-8" id="GraphsOptionsWrapper">
                <div class="FullWidth HorizontallyCentered">Select the graph:</div>
            </div>
        </div>

这在台式机上很好用。但是，在移动设备上，列太小而无法容纳所需的内容。在这种情况下，最好有两行（而不是一行中有两列），而每行中有一列。

如何在不复制内容的情况下做到这一点？内容包含一些控件，例如select，在页面上应该是唯一的。

谢谢！

Answer 1

希望这种结构对您有所帮助。

<div class="row">
        <div class="col-sm-4" id="LocationWrapper">
            <div class="FullWidth HorizontallyCentered">Select the location:</div>
            <select id="ddlLocation"></select>
            <span id="LocationNote">blablabla</span>
        </div>
        <div class="col-sm-8" id="GraphsOptionsWrapper">
            <div class="FullWidth HorizontallyCentered">Select the graph:</div>
        </div>
    </div>

Bootstrap 3：在移动设备上将两列分为两行

1 个答案: