html - Bootstrap col 没有像预期的那样在断点处崩溃

Question

Bootstrap 3.3.7

我有以下标记:

 <div class="homepage-casestudy container-fluid mt-25">
    <div class="row">
        <div class="col-md-8" style="border:1px solid green;">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-push-4 homepage-casestudy__text" style="border:1px solid orange;">
                        <h4>Case Study</h4>
                        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3>
                        <a href="#" class="btn btn-primary btn-lg">Read</a>
                        <a href="#" class="btn btn-lg btn-default">See All</a>
                    </div>
                </div>
            </div>   
        </div>

        <div class="col-md-4 hidden-sm hidden-xs" style="padding:0; border:1px solid red;">
            <img src="http://via.placeholder.com/1037x615" style="max-height: 300px" class="pull-right">
        </div>
    </div>
</div>

jsfiddle 在这里 https://jsfiddle.net/0wu3vt2d/1/

我试图创建的效果是有一个 .container-fluid，其中包含一个右对齐的图像(这似乎工作正常)。图片左侧的 .container 中有一些文本和按钮。

当它在中型/大型(.md-、.lg-)视口(viewport)上工作正常，例如:

但是当它折叠到移动视口(viewport)时，图像开始“重叠”文本，例如

我不明白为什么会这样，因为 .col-md-8 和 .col-md-4 在 Bootstrap 通常情况下加起来是“12 列”在较小的视口(viewport)上折叠它们？

我想在较小的屏幕上隐藏图像 - 这似乎可以使用 .hidden-sm、.hidden-xs。这似乎工作正常。但在调整浏览器窗口大小时，它仍然看起来很奇怪。

我做错了什么？

Answer 1

我相信这就是您所追求的:https://jsfiddle.net/0wu3vt2d/2/

您将 pull/push 与 offset 混在一起，这导致了问题。

随附的 fiddle 将类更改为:

col-sm-offset-4 col-md-6 col-md-offset-0 homepage-casestudy__text

这意味着在小屏幕上它的网格偏移量为 4，而在大屏幕上它没有偏移量，这当然可以根据您的喜好进行相应调整，但我相信这可以实现您想要的效果。