4

私はブートストラップ 4 グリッドを使用しています。私は3つの列を持っています。1 列目と 3 列目を col-8 に、2 列目を col-4 にします。基本的に 2 列目はサイドバーで、小さな画面では 1 列目と 3 列目の間に配置します。残念ながら、私の2番目の列は動的な高さを持ち、非常に長いため、最初の列には2番目の列の高さが割り当てられ、3番目の列は2番目の列の下から始まり、1番目と3番目の間に多くのスペースがあります。3 列目を最初の列のテキストのすぐ下に配置したいと思います。

それが理にかなっていることを願っています。

これは私がやろうとしていることのイメージです:

ここに画像の説明を入力

<div class="container">
    <div class="row ">
      <div class="col-sm-8 ">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 ">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8">
        <div>three of three columns</div>
        <div>three of three columns</div>
        <div>three of three columns</div>
      </div>
    </div>
  </div>
4

4 に答える 4

0

これを達成できる唯一の方法は、行クラスを削除し、以下の例ごとにフロートを追加することです

<div class="container">
            <div class=" ">
                <div class="col-md-8 grey  float-left">
                            <div>main content</div>
                            <div>main content</div>
                        </div>
                    </div>
                    <div class="col-md-4  blue float-right ">
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                        </div>

                    <div class="col-md-8 pink float-left">
                            <div>main2 content</div>
                            <div>main2 content</div>
                            <div>main2 content</div>
                    </div>
            </div>
        </div>
于 2018-10-05T16:14:50.443 に答える