我在一个旧页面上添加了一些新的内容,使用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是否只使用窗口的大小作为它的网格,还是可以让它响应动态变化的父组件的大小?
是的,bootstap的12列网格系统是基于设备或视口大小(即窗口大小,或窗口内可见的页面区域)。
这里是供你参考
.col-xs-
: 额外的小设备 手机 (<768px).col-sm-
: 小型设备 平板电脑 (≥768px).col-md-
: 中型设备 台式机 (≥992px).col-lg-
: 大型设备 台式机 (≥1200px)如果你正在使用v.3,这里是参考文档 联系