Bootstrap列没有堆叠

Question

我正在使用Oscommerce 2.4.3设计一个网站。自举。

在产品页面上，我想要的布局是左侧的产品图片和右侧列表格式的产品详细信息。

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

对我而言，产品详细信息中的详细信息彼此对齐非常重要，即NOT：

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

我是Bootstrap的新手，并就实现这一目标的最佳方式寻求指导。

我最初采用的方法是将图像放在一列中，将产品详细信息放在另一列中，并在该列中嵌套2列。这适用于那些高于图像底部的产品细节，但是低于图像底部的任何东西都会被推到左侧，即图像下方。

接下来我采用的方法是将图像放在一列中，然后在另一列中创建一个列表组。我必须在列中指定宽度，以便它们可以保持以2x2格式对齐，而不是恢复到其内容的大小，例如

f'(x0) = (f(x0 + h) - f(x0)) / h
f'(x0) = (f(x0) - f(x0 - h)) / h
f'(x0) = (f(x0 + h) - f(x0 - h)) / 2*h

这种方法在通过dekstop计算机查看网站时效果很好。但是，在调整屏幕大小或通过移动设备查看页面时，包含列表的列会拒绝图像下方的堆栈。

我的问题是：

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

修改

您可以将颜色，红色，重量和1kg div保持水平，但允许它们作为一组通过嵌套网格行堆叠在图像下方。首先，您需要将嵌套网格列标记为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 -->