引导响应的问题 - 图像和文本的重叠

Question

当改变互联网浏览器的大小时，一切似乎都响应，直到达到某个窗口大小。展开窗口时，我网站的容器大小将从（944px X 240px）跳到（463.5px x 289px）。请帮我弄清楚如何解决重叠问题！

在扩展它之前，它在它重叠之前是这样的：

这就是它的样子，在扩展它时，它跳转到一个较小的容器并重叠：

如果我继续扩展它，容器会再次回到正常大小，响应性再次变好：

这是我的代码：

<div class="container-fluid">
<div class="row" style="margin-bottom: 15px;">
    <div class="col-xs-12 col-md-6 col-md-offset-3" >
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-sm-offset-1">
                    <img src="/assets/img/blank_avatar.jpg" style="width: 200px; height: 200px;" class="img-circle"/>
                </div>
                <div class="col-xs-12 col-sm-8">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <h2>Title</h2>
                                <h4>Testing header here</h4>
                                <h4>Testing header here</h4>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <span>Face</span>
                                            <i class="icon-grin"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>Face</span>
                                            <i class="icon-neutral"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>Star</span>
                                            <i class="fa fa-star"></i>
                                        </a>
                                    </li>
                                </ul>
                                <a class="btn btn-default btn" href="#">
                                    <i class="icon-neutral"></i>test
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

看一下 Fiddle 我认为它现在可以正常运作 我删除了div，其中包含一些引导类，并将类放在我删除的div下面的div中。并添加了全套课程。如果您只使用较小的类，则可能会在调整大小时失去控制权。

现在，当你调整大小时，它看起来工作正常。

<div class="container-fluid">
<div class="row" style="margin-bottom: 15px;">
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" >
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <img src="https://lh3.googleusercontent.com/-wcJ9gRjTTRY/AAAAAAAAAAI/AAAAAAAAAAA/XuTCJHDodX4/photo.jpg" style="width: 200px; height: 200px;" class="img-circle"/>
                </div>
                    <div class="container-fluid col-lg-6 col-md-6 col-sm-6">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <h2>Title</h2>
                                <h4>Testing header here</h4>
                                <h4>Testing header here</h4>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 block">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <span>Face</span>
                                            <i class="icon-grin"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>Face</span>
                                            <i class="icon-neutral"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span>Star</span>
                                            <i class="fa fa-star"></i>
                                        </a>
                                    </li>
                                </ul>
                                <a class="btn btn-default btn" href="#">
                                    <i class="icon-neutral"></i>test
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

最好的猜测是，您在容器内声明容器，这可能会导致问题。如果你给第一次潜水包含了适合你的所有calss容器 - 液体。我可能会开始得到那个和第二个.row入级div，因为你想让一切内联然后垂直折叠。