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-）视口上运行正常，例如：

但是当它折叠到移动视口时，图像开始重叠＆＃34;文本，例如

我不明白为什么会发生这种情况，因为.col-md-8和.col-md-4加起来有＆＃34; 12列＆＃34; Bootstrap通常在较小的视口上将它们折叠？

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

我做错了什么？

Answer 1

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

您pull/push与offset混淆了，这导致了问题。

附加的小提琴将类更改为：

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

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