Html 为什么表格单元格上的拉伸元素与其他单元格中的元素重叠？

我正在开发一个React（0.13.3）SPA，使用bootstrap 3.2.0，用户可以从列表中选择不同的大学课程，并将它们放在一个表中。（上下文请参见此处） 我的问题是，课程一旦放在桌上，就可能超过四分之一（LP）。对此作出解释；我用宽度：200%拉伸这些课程元素（实际上是boostrap按钮）。让它们伸展到两个表格单元格上。如果在这样一个单元中已经存在一个元素，则它们彼此重叠

我想要完成的是，不做任何修改，阻止元素重叠，而是让两个元素中的一个跳到下面的空间-在同一个表行上。就像第二个单元格中也存在较大的课程元素一样。
哪一个跳下来并不重要

这是两个重叠课程的表格代码。

一个选项是使用boostrap网格而不是表格。但总的来说，这让我觉得我正在努力实现的目标有些混乱