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

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，因为您希望将所有内容都内联然后垂直折叠。