Bootstrap网格列未堆叠 [英] Bootstrap grid columns not stacking

问题描述

使用一些简单的Bootstrap元素在Bigcartel商店中工作.我已经与Bootstrap进行了很多次合作，并且这些列在该网站的其余部分正确堆叠，但是在此特定页面上却没有正确堆叠.这是代码:

Working on a Bigcartel store with some simple Bootstrap elements. I've worked with Bootstrap many times, and the columns are stacking correctly on the rest of the site, but not on this particular page. Here's the code:

<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的默认行为.不知道为什么这不起作用.据我所知，行/列正确嵌套.

So as the screen size gets smaller, the text is overlapping the image, instead of stacking the columns which is Bootstrap's default behavior. Not sure why this isn't working. To my knowledge, the row/col are nested correctly.

推荐答案

col-xs-*列不堆叠.改为使用col-sm-*.

The col-xs-* columns don't stack. Use col-sm-* instead.

Codeply演示

注意:引导程序4 col-xs-*已更改为仅col-*.

这篇关于Bootstrap网格列未堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！