html - 灵活的 2 列列表布局

Question

我有一个很长的列表，有两列(bootstrap 3 col-3 和 col-9 类)，低于某个视口(viewport)宽度时会乱七八糟。看这里:

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

问题是某个单元格的内容超出了宽度允许的内容，以至于它中断了，从而弄乱了布局。 (参见此处:Screenshot

我不希望单元格折叠成单列设计，因为我需要在其旁边而不是其下方对每个品牌进行描述。如果可能的话，我希望列表自动调整自己，以便右列的高度调整到左边的高度，以防左列内部有文本中断。 “ABM Greifenberger”单元就是这种情况。

非常感谢!

Answer 1

使用列表是一种非常糟糕的方法，因为它不应该以这种方式构建。每个列表项都应该位于另一个列表项之下，而不是紧挨着它。

我建议使用表，Bootstrap 可以很好地实现这一点。表格旨在将元素彼此相邻地组织起来，而 Bootstrap 也有使它们完全响应的类。

FIDDLE

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