时间戳

首页 > 解决方案 > Bootstrap 3：在移动设备上将两列行分成两列一列

twitter-bootstrap-3 - Bootstrap 3：在移动设备上将两列行分成两列一列

问题描述

我目前有：

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

这适用于桌面。然而，在移动设备上，这些柱子太小了，无法容纳所需的东西。在这种情况下，最好有两行（而不是一行两列），每行一列。

我怎么能在不复制内容的情况下做到这一点？内容有一些控件，如选择，在页面上应该是唯一的。

谢谢！

标签： twitter-bootstrap-3responsive-design

解决方案

我希望这个结构会对你有所帮助。

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

推荐阅读