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

Bootstrap网格列不堆叠

1 个答案: