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

问题在于某个单元格的内容比宽度允许的内容更多，因此它会中断，这会影响布局。（见这里：Screenshot

我不希望单元格折叠成单列设计，因为我需要对其旁边的每个品牌进行描述，而不是低于它。如果可能的话，我希望列表自动调整，以便右列的高度调整到左侧的高度，以防左列内部有文本中断。这是细胞＆＃34; ABM Greifenberger＆＃34;

的情况

非常感谢！

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

灵活的2列列表布局

1 个答案: