Html 升级到bootstrap 4后，网格列将自动换行

我使用引导网格类制作了一个类似于表的显示。 其中的主体行使用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>

服务Id
服务类型
同步化
独生子女

在Bootstrap3.5中，这可以正常工作。在4中，每个列都在一条新的行上，而它们应该在同一行上。 如果删除包装div，例如myListOutput和myDynamicList，则布局正确。Cols并排填充完整的行，并在新的行上填充每行

我需要包装div，以便在DOM中获得一个钩子将我的子元素附加到其中，但这会抛出布局

---

在bootstrap 4中应该如何实现这一点。

为什么不使用一个具有“row”类的div来包装表体的每一行（在div中，使用id=“myListOutput”）并将flex wrap设置为nowrap：

<div id="myDynamicList">
    <div class="row flex-nowrap" id="myHeaderRow">
        <div class="col-4 tabledHeader">Service Id</div>
        <div class="col-4 tabledHeader">Service Type</div>
        <div class="col-2 tabledHeader">Synchronised</div>
        <div class="col-1 tabledHeader">Singleton</div>
        <div class="col-1 tabledHeader"></div>
    </div>
    <div id="myListOutput">
        <div class="row flex-nowrap">
            <div class="col-4"> first </div>
            <div class="col-4"> second </div>
            <div class="col-2"> third </div>
            <div class="col-1"> fourth </div>
            <div class="col-1"> fifth </div>
        </div>

        <div class="row flex-nowrap">
            ...
        </div>
        ...
    </div>
</div>

服务Id
服务类型
同步化
独生子女
第一
第二
第三
第四
第五
...
...

为什么不用一个具有“row”类的div来包装表体的每一行（在div中，id=“myListOutput”），并将flex wrap设置为nowrap：

<div id="myDynamicList">
    <div class="row flex-nowrap" id="myHeaderRow">
        <div class="col-4 tabledHeader">Service Id</div>
        <div class="col-4 tabledHeader">Service Type</div>
        <div class="col-2 tabledHeader">Synchronised</div>
        <div class="col-1 tabledHeader">Singleton</div>
        <div class="col-1 tabledHeader"></div>
    </div>
    <div id="myListOutput">
        <div class="row flex-nowrap">
            <div class="col-4"> first </div>
            <div class="col-4"> second </div>
            <div class="col-2"> third </div>
            <div class="col-1"> fourth </div>
            <div class="col-1"> fifth </div>
        </div>

        <div class="row flex-nowrap">
            ...
        </div>
        ...
    </div>
</div>

服务Id
服务类型
同步化
独生子女
第一
第二
第三
第四
第五
...
...

我最终让它工作的方法是添加另一组像这样的行和列类

   <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>

服务Id
服务类型
同步化
独生子女

我最终让它工作的方法是添加另一组像这样的行和列类

   <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>

服务Id
服务类型
同步化
独生子女

myDynamicList和myHeaderRow还有其他CSS吗？没有，它们只是ID。我现在也尝试了同样的方法，动态添加的行填充了水平空间，但是thead和th行被聚集在左侧，并且没有与主体的tds相对应地填充该行！？！？myDynamicList和myHeaderRow还有其他CSS吗？没有，它们只是ID。我现在也尝试了同样的方法，动态添加的行填充了水平空间，但是thead和th行被聚集在左侧，并且没有与主体的tds相对应地填充该行！？！？