Бутстрап-столбец не складывается

Question

Я разрабатываю веб-сайт с использованием Oscommerce 2.4.3. Bootstrap.

На странице продуктов мой желаемый макет - это изображение продукта слева, а детали продукта - в виде списка справа.

| IMAGE | Colour:   Red | 
|  | Weight:   1kg | 
|  | size:   1M | 
|  | model:   xyz | 

Это очень важно для меня, что детали в деталях продукта совмещены друг с другом, т.е. НЕ:

Colour: Red 
Weight: 1kg 
size:1M 
model: xyz 

Я новичок в Bootstrap и искать некоторое руководство по лучшим способом для достижения это.

Подход, который я взял первоначально, состоял в том, чтобы поместить изображение в один столбец, детали продукта в другое и вложить в него два столбца. Это работало для тех деталей продукта, которые были выше нижней части изображения, однако все, что было ниже нижней части изображения, затем было полностью оттолкнуто до левой стороны под под изображением.

Подход, который я использовал впоследствии, состоял в том, чтобы поместить изображение в один столбец, а в другом столбце создайте группу списка. Я должен был указать ширину в столбцах, чтобы они могли оставаться выровненными в формате 2x2, а не возвращаться к размеру их содержимого, например.

<li class="list-group-item borderless col-sm-4"> Colour </Li> 
    <li class="list-group-item borderless col-sm-8"> Red </Li> 
    <li class="list-group-item borderless col-sm-8"> Weight </Li> 
    <li class="list-group-item borderless col-sm-8"> 1kg </Li> 

Этот подход работает и прекрасно выглядит при просмотре сайта с помощью компьютера с декстопом. Однако при изменении размера экрана или просмотре страницы через мобильный телефон столбец, содержащий список, отказывается от стека под изображением.

Мои вопросы:

1. Любое общее руководство по лучшим способом для достижения формата выше:
2. Любая причина, почему списки не складывают под изображением и что я мог сделать, чтобы решить.

Я благодарен всем, кто может указать мне в правильном направлении.

Answer 1

Лично я думаю, что было бы лучше отделить элементы группы списка от элементов сетки.

<div class="row"> 
<div class="col-sm-4"> 
<img src="../path/to/image.jpg" class="img-responsive" /> 
</div> 

<div class="col-sm-8"> 
<li class="list-group-item borderless"> Colour </Li> 
    <li class="list-group-item borderless"> Red </Li> 
    <li class="list-group-item borderless"> Weight </Li> 
    <li class="list-group-item borderless"> 1kg </Li> 
</div> 
</div><!-- closing div for row --> 

Если я ошибаюсь, группа списка всегда будет отображаться вертикально. Если вы хотите, чтобы список для отображения в горизонтальном положении на больших экранах, но складывают вертикально на маленьком экране, то вы можете сделать что-то больше, как это:

<div class="row"> 
<div class="col-sm-4"> 
<img src="../path/to/image.jpg" class="img-responsive" /> 
</div> 

<div class="col-sm-2">Colour</div> 
<div class="col-sm-2">Red</div> 
<div class="col-sm-2">Weight </div> 
<div class="col-sm-2">1kg </div> 

</div><!-- closing div for row --> 

EDIT

Вы можете сохранить цвет , Red, Weight и 1kg divs горизонтально, но позволяют им как группе стекаться под изображение, вставляя строки сетки. Сначала вам нужно пометить вложенные столбцы сетки как col-xs (согласно bootstrap documentation они всегда будут оставаться горизонтальными).

<div class="row"> 
    <div class="col-sm-4"> 
    <img src="../path/to/image.jpg" class="img-responsive" /> 
    </div> 

    <div class="col-sm-8"> 

    <div class="row"> 
     <div class="col-xs-3">Colour</div> 
     <div class="col-xs-3">Red</div> 
     <div class="col-xs-3">Weight</div> 
     <div class="col-xs-3">1kg</div> 
    </div><!-- nested row --> 

    </div><!-- col-sm-8 --> 
</div><!-- outer row --> 

Если вы хотите, чтобы список остаться горизонтальным, но затем на небольших экраны разделить на два уложенных горизонтальные списки, то вы можете комбинировать классы сетки, как это:

<div class="row"> 
    <div class="col-sm-4"> 
    <img src="../path/to/image.jpg" class="img-responsive" /> 
    </div> 

    <div class="col-sm-8"> 

    <div class="row"> 
     <div class="col-xs-6 col-sm-3">Colour</div> 
     <div class="col-xs-6 col-sm-3">Red</div> 
     <div class="col-xs-6 col-sm-3">Weight</div> 
     <div class="col-xs-6 col-sm-3">1kg</div> 
    </div><!-- nested row --> 

    </div><!-- col-sm-8 --> 
</div><!-- outer row -->