3

ブートストラップを学んでいます。ペイントを使用して、Bootstrap 4 とその新しいフレックス サポートで作成しようとしているものの簡単なモックアップを作成しました。私の問題は、問題のペイント スケッチに見られます。Flexbox は高さを均等にするため、コメント セクションは関連セクションの末尾の下に表示されます。

コメント セクションをコンテンツ列内に配置してから、コード内で CSS flex の順序を再配置しようとしましたが、順序 CSS ルールは各行内でのみ機能するように見えます (他の行からのものを挿入することはできないようです)。 .

元のコード:

<div class="container">
<div class="row">

    <div class="col-md-8 content">
    <br>
        <h2 class='var-heading'>heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur ad ut purus rutrum, mattis neque non, ornare ipsum. Integer ipsum risus, fermentum vel fringilla et, blandit molestie tellus. Sed eu lobortis dolor. Integer enim leo, tristique ut ornare sed, tincidunt at mauris!</p>
        <div class="card">
        social media bar
        </div>
    </div>

    <div class="col-md-4 related">
        <div class="row">

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 1 longer tag</p>
                  </div>
                </div>
            </div>


            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 2</p>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 3 longer tag</p>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <h4 class="card-title">tag 4 longer tag</h4>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <h4 class="card-title">tag 5</h4>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <div class='col-md-2 comments'>
    commnents
    </div>

</div>
</div>

問題： 問題

以下は、理想的なモバイルおよびデスクトップ レイアウトです。

理想的なデスクトップ 理想的な携帯

4

3 に答える 3

1

これはうまくいかないかもしれませんが、純粋に css を使用してそれを行うと私が考えることができる唯一の方法です。基本的に：

@media (min-width: 600px) {
    .content {
        float: left;
        width: 50%;
    }

    .related {
        float: right;
        width: 50%;  
    }

    .comments {
        float: left;
        width: 50%;  
    }
}

これが Bootstrap にどのように適合するかはわかりませんが、この概念を使用して解決策を見つけられることを願っています。完全なデモ。

于 2015-11-18T19:51:24.217 に答える