유연한 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>... 

문제는 폭이 허용하는 것보다이 레이아웃을 망쳐 놨하는, 나누기 있도록 특정 셀의 내용이, 더 많은 콘텐츠를 가지고 있다는 것입니다. (여기를 참조하십시오 : Screenshot

각 셀 옆에 각 셀의 설명이 필요하므로 셀이 한 줄로 축소되는 것을 원하지 않습니다. 가능하면 자동으로 목록을 원합니다. 왼쪽 열에 텍스트 열이있는 경우 오른쪽 열의 높이가 왼쪽 열의 높이와 같아 지도록 조정하십시오. "ABM Greifenberger"셀의 경우입니다.

감사합니다.

Answer 1

목록을 사용하는 것은 이런 방식으로 구성되지 않기 때문에 매우 어려운 방법입니다. 각 목록 항목은 옆에있는 것이 아닌 다른 목록 항목 아래에 있어야합니다.

부트 스트랩이 허용하는 테이블을 사용하는 것이 좋습니다. 테이블은 서로 옆에 항목을 구성하기위한 것이고, 부트 스트랩에는 항목을 완전히 반응하게 만드는 클래스가 있습니다.

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