Javascript 如果内容在第一个div中超过，如何向下一个div添加内容

我想在一个分区中添加5个类别。目前，我在一个分区中获取所有类别。在添加更多类别时，我希望它们在下一个分区中显示。请任何人帮助我如何做到这一点。这就是我想要实现的目标

---

我知道我可以在col-md-12中创建col-md-4*3，但我仍然可以在第一个div中获得所有类别

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#jobsByindustry"><b>Jobs By Industry</b></a></li>
  <li><a data-toggle="tab" href="#jobsByCity"><b>Jobs By city</b></a></li>
  <li><a data-toggle="tab" href="#jobsByCompany"><b>Jobs By company</b></a></li>

</ul>

<div class="tab-content">
  <div id="jobsByindustry" class="tab-pane fade in active">
    <div class=" col-md-12 jobsByCategory">
          <?php if (isset($industries)): ?>
          <?php foreach ($industries as $industry): ?>  
           <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $industry->industry_id; ?>"><?php echo $industry->industry_name; ?></a><br>
          <?php endforeach ?>
          <?php endif ?>
      </div>
  </div>

  <div id="jobsByCity" class="tab-pane fade">
    <div class="col-md-12 jobsByCategory">
          <?php if (isset($cities)): ?>
          <?php foreach ($cities as $city):

           ?>  
           <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $city->city_id; ?>"><?php echo $city->city_name; ?></a><br>
          <?php endforeach ?>
          <?php endif ?>
      </div>
  </div>

  <div id="jobsByCompany" class="tab-pane fade">
      <div class=" col-md-12 jobsByCategory">
            <?php if (isset($companies)): ?>
            <?php foreach ($companies as $company): ?>  
             <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $company->company_id; ?>"><?php echo $company->company_name; ?></a><br>
            <?php endforeach ?>
            <?php endif ?>
        </div>
  </div>
</div>

jquery实体模型如下。这是基于具有相同类名的三列。它循环遍历第一列，并相应地将列表项插入下一列和后续列。在小提琴和css中注释的步骤需要根据您的情况进行调整

var cats=$（'.cols'）.eq（0）.find（'li'），
num=5；
cats.each（function（i）{//循环通过每个li
如果（i>=num）{//在num计数后开始
var temp=$（此），
count=Math.floor（i/num）；//计算出倍数
$（'.cols'）.eq（count）.append（temp[0].outerHTML）；//将此li添加到下一个可替换列
temp.remove（）；//将其从第一个列表中删除
}
});
.cols{
显示：内联块；
宽度：25%；
左：5%；
}


一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本




div
元素是“块级”元素。也就是说，它们在下一行渲染，位于任何先前内容的下方。为了让它们互相显示，您可以考虑使用一个CSS规则中的<代码>浮点：左边的< /代码>，目标是“代码> div < /Case>元素。您使用的是引导程序，您可能需要一个包含<三代码> COL-MD 4/<代码>代码> > COL-MD 12 < /代码>如Kisaragi所说。bootstrap提供了一个网格系统。每行的宽度为12，12/3的宽度为4，因此
列-**-4
就是从这里来的。
md
与屏幕大小有关。这也是它不适用于atm的原因，
12
占据了整个宽度。我知道我可以在col-md-12中创建col-md-4*3，但我仍然可以在第一个div中获得所有类别。