Bootstrap网格列不堆叠

Question

使用一些简单的 Bootstrap 元素开发 Bigcartel 商店。我已经使用 Bootstrap 多次，并且这些列在网站的其余部分上正确堆叠，但在这个特定页面上却没有。这是代码：

<div class="container-fluid team" id="merchpreview" style="background-color: #3ED500">
  <div class="row">
    <div class="col-xs-12 text-center">
      <h1 style="Font-family: Nunito; color: #F1F2F2;"><b><u>MERCH INFO</b></u></h1>
    </div>
  </div>
     <div class="row">
       <div class="col-xs-3">
              <a href="{{ product.image | product_image_url }}" >
                {% if product.on_sale %}<div id="sale"><span class="onsale">On Sale</span></div>{% endif %}
                  {% case product.status %}{% when 'sold-out' %}<div id="sold"><span class="soldout">Sold Out</span></div>{% endcase %}
              <img src="{{ product.image | product_image_url }}" alt="Image of {{ product.name | escape }}" style="margin-bottom: 5em;" />
               </a>

    </div>


    <div class="col-xs-7" style="color: #F1F2F2;">
    <div id="product-details" class="span5">
        <h3 class="name" style=" font-family: 'Muli', sans-serif;"><span>{{ product.name }}</span></h3>
          <h3 class="price" style=" font-family: 'Muli', sans-serif;">{% if product.max_price != product.default_price %}<del>{{ product.max_price | money_with_sign }}</del>{% endif %}<span>{{ product.price | money_with_sign }}</span></h3>
          <h3 style=" font-family: 'Muli', sans-serif;"><b>Product features:</b></h3>
          <ul>
            {{ product.description }}
          </ul>
        </div>

因此，随着屏幕尺寸变小，文本会与图像重叠，而不是 Bootstrap 的默认行为堆叠列。不知道为什么这不起作用。据我所知，行/列嵌套正确。

Answer 1

列col-xs-*不堆叠。col-sm-*代替使用。

Codeply demo

注意：Bootstrap 4 col-xs-*已更改为仅col-*.