温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - grid columns wrap after upgrading to bootstrap 4
bootstrap-4 css html twitter-bootstrap

html - 网格列在升级到Bootstrap 4后自动换行

发布于 2020-04-04 11:03:19

我有一个类似表格的表格,它是使用引导网格类制作的。其中的正文行使用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中应该如何做

查看更多

提问者
Gurnard
被浏览
58
Gurnard 2020-02-03 23:34

我最终使用它的方法是添加另一组像这样的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>