bootstrap 响应问题 - 图片和文本重叠

Question

当更改 Internet 浏览器的大小时，在达到某个 window 大小之前，一切似乎都是响应式的。当扩展我的 window 时，我网站的容器大小将从 (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

最好的猜测是您在容器内声明了一个容器，这可能会导致问题。如果你给第一个包含所有东西的 dive 应该适合你的 calss container-fluid。我可能会开始得到那个和第二个 .row 分类 div 因为你想让所有东西都内联然后垂直折叠。

Answer 2

看看这个Fiddle.
我认为它现在可以正常工作了。
我删除了 div 上的 bootstrap 类并将类放在 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>

bootstrap 响应问题 - 图片和文本重叠

Issue with bootstrap responsiveness - overlapping of image and text

html

css

user-interface

twitter-bootstrap

responsiveness