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标签，这就是导致他发出的问题，当它显示在桌面上时就显示出来了

enter image description here

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

enter image description here

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

Answer 1

您正在使用无效的引导网格。 Col应该是行的孩子。使用正确的网格，一切都将完美。

Answer 2

Scott，hunzaboy说你需要像这样使用潜水

    <div class="row">
<div class="col-sm-12"></div>
</div>

我不完全理解你的问题，但希望你这样问，

在重新调整第一张图片的大小时，我会适当地重新调整大小，而不会对其他div造成任何伤害。为此你需要将它分成3个主要的div，检查下面的代码

<div class="row">
<div class="col-md-6">This is the image holding div</div><div class="col-md-6"> this is the right side text "Flavour #6, etc..."</div>
<div class="col-md-12">This is the text on the bottom</div>
</div>

我会看，顶部有2列，底部有一列。

对于移动视图，您可以使用col-xs-12类，它将显示为堆栈。

希望这是你问的。感谢

当屏幕最小化bootstrap 3时，测试不会堆叠

2 个答案: