使用一些简单的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默认行为的列.不知道为什么这不起作用.据我所知,行/列是正确嵌套的.
解决方法
col-xs- *列不会堆叠.请改用col-sm- *.
注意：Bootstrap 4 col-xs- *已更改为col- *.
