Bootstrap网格内的可调整尺寸的面板。

Question

我在一个旧页面上添加了一些新的内容，使用Dojo库来创建2个面板，中间有一个隔板，可以向左向右拖动来展开收缩面板。把它想象成一个代码编辑器，在2个文件之间有一个分割视图。

我试图在其中一个面板中放置一个表单，当面板足够小时，表单元素和标签就会堆叠起来。

<form>
    <div class="container">
        <div class="form-group">
            <div class="row">
                <div class="col-md-1">
                    <label for="ID">Identifier</label>
                </div>
                <div class="col-md-5">
                    <select name="ID" id="ID">
                        <option value="1">1</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label for="Direction">Direction</label>
                </div>
                <div class="col-md-5">
                    <select name="Direction" id="Direction">
                        <option value="ASCENDING">ASCENDING</option>
                        <option value="DESCENDING">DESCENDING</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</form>

但是我注意到当我调整面板大小时 网格行为并不适用。只有当我实际调整整个窗口的大小时，网格行为才会适用。

Bootstrap是否只使用窗口的大小作为它的网格，还是可以让它响应动态变化的父组件的大小？

Answer 1

是的，bootstap的12列网格系统是基于设备或视口大小（即窗口大小，或窗口内可见的页面区域）。

这里是供你参考

• .col-xs- : 额外的小设备 手机 (<768px)
• .col-sm- : 小型设备 平板电脑 (≥768px)
• .col-md- : 中型设备 台式机 (≥992px)
• .col-lg- : 大型设备 台式机 (≥1200px)

如果你正在使用v.3，这里是参考文档 联系