靈活的2列列表布局

Question

我有一個很長的列表，其中有兩列（bootstrap 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;
}