html - 屏幕最小化时测试不会堆叠 bootstrap 3

Question

好的，我有以下 HTML

<div class="container">
<div class="row col-sm-12" id="productBrief">
    <div id="RaspberryAndChocolate" style="display:none; height:200px;">
        <div class="col-sm-6 text-center">
            <img src="~/Content/Images/YogurtImages_404x290/Rasberry_White_Chocolate_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Rasberry White Chocolate Yogurt" />
        </div>
        <div class="col-sm-6">
            <h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
            <h1 class="raspberryRed">
                RASPBERRY &<br /> WHITE CHOCOLATE
            </h1>
            <p class="productPara">
                A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
            </p>
            <p>
                <span class="label label-danone label-as-badge" style="font-size: 0.9em; padding:3%"><a href='@Url.Action("Products", "Products")' class="colourWhite">VIEW ALL FLAVOURS</a></span>
            </p>
        </div>
    </div>
    <div class="clearfix"></div>
    <div id="BlueBerry" style="display:none; height:200px;">
        <div class="col-sm-6 text-center">
            <img src="~/Content/Images/YogurtImages_404x290/Blueberry_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Blueberry Yogurt" />
        </div>
        <div class="col-sm-6">
            <h2 class="blueBerry productLineHeight">FLAVOUR #6</h2>
            <h1 class="blueBerry">
                BLUEBERRY
            </h1>
            <p class="productPara">
                Just imagine plump and juicy blueberries immersed in a deliciously creamy yoghurt. Enough said.
            </p>
            <p>
                <span class="label label-as-badge" style="font-size: 0.9em; padding:3%"><a href='@Url.Action("Products", "Products")' class="colourWhite">VIEW ALL FLAVOURS</a></span>
            </p>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
    <div class="col-lg-12 text-center">
        <div class="col-lg-2"></div>
        <p style="width:70%;" class="text-center col-lg-8">
            Experiencing Ultimate's uniquely luscious texture for the first time is beyond words. So don't even try. Take a moment to enjoy the ultra creaminess, the juicy ripened fruits and an array of wicked indulgences that come together to create a yoghurt like no other.
        </p>
        <div class="col-lg-2"></div>
    </div>
</div>

现在大约有 8 个不同的 div，但为了简单起见，我只显示了 2 个，但只显示了一个 div，将其视为随机影响，因此用户刷新页面时会显示不同的 div(这是在 jquery 中完成的) ) 但如果你查看 HTML 的底部，你会看到另一行带有 P 标记，这就是导致他出现问题的原因，当在桌面上显示时，它显示如下

当我最小化浏览器时，图像底部的文本显示在位于酸奶盒右侧的文本下方，如此处所示。

我已经添加了 clearfix，尝试添加一个新容器，但问题仍然存在......

Answer 1

您正在使用无效的 Bootstrap 网格。 Col 应该是 row 的 child 。使用正确的网格，一切都会完美无缺。