代码之家 › 专栏 › 技术社区 › Gurnard

网格列在升级到引导程序4后换行

bootstrap-4 twitter-bootstrap css html

Gurnard · 技术社区 · 4 年前

我有一个使用bootstrap网格类制作的类似于表的显示。其中的主体行由javascript动态填充。我有一个id为的div,其中包含一行用于标题列,另一个div具有另一个id,用于保存主体行,如下所示:

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

在bootstrap3.5中,这很好。当每一列应该排成一行时,每一列都在一条新线上。如果我删除包装div,比如mylistoput和myDynamicList,那么布局是正确的。Cols并排填充完整行和新行上的每一行。

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

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

0 回复 | 直到 4 年前

Bilel-Zheni 4 年前

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

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

Gurnard 4 年前

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

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