我有一个类似表格的表格,它是使用引导网格类制作的。其中的正文行使用javascript动态填充。该表是隐藏的还是根据应用程序的状态显示的。我有一个具有ID的div,其中包含一个用于标题列的行,另一个具有另一个ID的div,用于保存主体行,如下所示:
<div id="myDynamicList" style="display:none;">
<div class="row" id="myHeaderRow">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
<div id="myListOutput"></div>
</div>
在bootstrap 3.5中,这很好用。在4中,每个列在应该排成一行时都换行。如果删除包装的div,例如myListOutput和myDynamicList,则布局是正确的。Cols并排填充完整行,并在每行上填充新行。
我需要包装div,以便在DOM中获得一个钩子,以将我的子元素附加到其中,但这会引发布局
在Bootstrap 4中应该如何做
我最终使用它的方法是添加另一组像这样的row和col类...
<div id="myDynamicList" style="display:none;" class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
</div>
</div>
<div class="row" id="listBody">
<div class="col-sm-12" id="myListOutput"></div>
</div>