1

私はしばらくの間、この問題を解決しようとしてきました... 私は現在 Web 開発を学んでおり、ブートストラップ グリッド システムの実装は演習の 1 つです。多くのリソースを見ましたが、まだ答えが見つかりません。

問題は、すべてが正常に機能しているように見えることです。S と XS の間を除くすべての画面サイズで。なぜかレイアウトが崩れる。スマホで見ても同じです。その時の様子をスクショ撮ってみました。

誰かが私を助けてくれたらいいのに...ありがとう

画像

<div class="container-fluid">
    <h1>
        Work
    </h1>
    <div class="row" id="work1">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
    </div>
    <div class="row" id="work2">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
    </div>
</div>
4

2 に答える 2

0 
+-----------+-----------+
|sm-6       |sm-6       |
|+----+----+|+----+----+|
||xs-6|xs-6|||xs-6|xs-6||
|+----+----+|+----+----+|
+-----------+-----------+

これはあなたが望むことをする方法です。行ごとに12colを超えることはできません

必要な場合は、xs6 + xs6 | xs6 + xs6ネストされた行を使用する必要があり、親の行は必要に応じて分割されます。

http://www.bootply.com/pZ84zsBrqA

<div class="row" id="work1">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/image4.png">
            </div>

            <div class="col-xs-6">
                <p>
                    Test your site out on your phone. It should look like this
                    (well, without the cats! Please replace these images with
                    screenshots and descriptions of your own work). Test your
                    site out on your phone. It should look like this (well,
                    without the cats!
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/image4.png">
            </div>

            <div class="col-xs-6">
                <p>
                    Test your site out on your phone. It should look like this
                    (well, without the cats! Please replace these images with
                    screenshots and descriptions of your own work). Test your
                    site out on your phone. It should look like this (well,
                    without the cats!
                </p>
            </div>
        </div>
    </div>
</div>
于 2015-12-06T22:56:44.127 に答える