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

问题描述 投票:0回答:1

我在一个旧页面上添加了一些新的内容,使用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是否只使用窗口的大小作为它的网格,还是可以让它响应动态变化的父组件的大小?

html css twitter-bootstrap dojo
1个回答
0
投票

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

这里是供你参考

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

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

© www.soinside.com 2019 - 2024. All rights reserved.