灵活的2列列表布局

Question

我有一个很长的列表，其中有两个列(引导3、col-3和col-9类)，它会在一定的视口宽度以下混乱。见这里：

...<div class="modal-body">
            

            <ul id="supplylist" class="list-group row" >
                
<li class="list-group-item col-3">  A+R </li>   <li class="list-group-item col-9">  Valves & Fittings   </li>
<li class="list-group-item col-3">  ABB </li>   <li class="list-group-item col-9">  Automation,     Processing, Power   </li>
<li class="list-group-item col-3">  ABB Kent    </li>   <li class="list-group-item col-9">  Pneumatic Cylinders </li>
<li class="list-group-item col-3">  ABM Greifenberger   </li>   <li class="list-group-item col-9">  Motors & Geared Motors  </li>
<li class="list-group-item col-3">  ABS </li>   <li class="list-group-item col-9">  Pumps   </li>
<li class="list-group-item col-3">  ACE </li>   <li class="list-group-item col-9">  Shock Absorbers </li>
<li class="list-group-item col-3">  ADDA    </li>   <li class="list-group-item col-9">  Motors & Converters </li>
<li class="list-group-item col-3">  AEG </li>   <li class="list-group-item col-9">  Switchgear, Transformers, Motors    </li>
</ul>
</div>...

问题是，某个单元格的内容比宽度允许的内容更多，因此会中断，从而扰乱布局。(参见此处：屏幕截图

我不想细胞崩溃成一列设计，因为我需要描述每一个品牌旁边，而不是低于它。如果可能的话，我希望列表能够自动调整自己，这样右列的高度就可以调整到左边的高度，以防左边的列有文本中断。这就是"ABM Greifenberger“单元格的情况。

非常感谢!

Answer 1

使用列表是一种非常糟糕的方法，因为它不是以这种方式构造的。每个列表项应该在另一个列表项下，而不是在它旁边。

我建议使用表，Bootstrap可以很好地使用这些表。表是用来构造彼此相邻的项，Bootstrap也有使它们完全响应的类。

小提琴

HTML:

<div class="modal-body">
    <table class="table table-striped table-bordered">
        <tr>
            <td>A+R</td>
            <td>Valves & Fittings</td>
        </tr>
        <tr>
            <td>ABB</td>
            <td>Automation, Processing, Power</td>
        </tr>
        <tr>
            <td>ABB Kent</td>
            <td>Pneumatic Cylinders</td>
        </tr>
        <tr>
            <td>ABM Greifenberger</td>
            <td>Motors & Geared Motors</td>
        </tr>
    </table>
</div>

CSS:

td:first-child {
    width: 200px;
}