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クラスを配置しました。そして、クラスのフルセットを追加しました。小さいクラスを使用するだけでは、サイズが変更されると制御できなくなります。 divdiv

サイズを変更すると、正常に動作するように見えます。

<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>