2

私はここにjsfiddelを持っています - http://jsfiddle.net/ryz4wugo

私はブートストラップを使用しています。テキストの量が異なる 4 つの列です。

ウィンドウのサイズが変更され、レイアウトが 2 列に移動すると、ブロック 3 が右に押し出され、ブロック 4 が押し下げられます。

ブートストラップはフロートを使用して列を配置します。ブロックの高さが異なるため、グリッドがスペースから押し出されます。

他の問題が発生するため、ブートストラップフロートをオーバーライドしたくありません。

min-height でこれを修正する最善の方法は、つまり、min-height に問題はありますか。

        <div class="container">

            <div class="row">


                <div class="col-sm-6 col-md-3 block">
                    <p>
                        <span>ONE</span>   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Ut enim ad minim veniam, Ut enim ad minim veniam,
                    </p>    
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>TWO</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>   
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>THREE</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    </p>   
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>FOUR</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>   
                </div>

            </div>    

        </div>
4

1 に答える 1

3

clear: left;3列目に使用することで、このようにすることができます。

JSFiddle -デモ

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block" style="clear: left;">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
    </div>
</div>

または: stylesheet.css に次の行を追加するだけです

JSFiddle -デモ

CSS:

.row div:nth-child(3) {
    clear: left;
}

BootstrapCSS@mediaクエリに従って：

JSFiddle -デモまたは全画面表示

CSS:

@media (min-width: 768px) {
    .row .col-sm-6:nth-child(3) {
        clear: left !important;
    }
}
@media (min-width: 992px) {
    .row .col-md-3:nth-child(3) {
        clear: none !important;
    }
}

[編集済み] - [ @Christinaに感謝!]

Bootstrap には、これに対処する方法があります。12 に追加することになっているため、そのブレークポイントでのみ表示される clearfix を追加します。<div class="clearfix visible-sm"></div>そのブレークポイントの 12 の後に:

JSFiddle -デモ

等高レスポンシブ スクリプトの jQuery フォールバックで Clearfix が表示されます。

JSFiddle -デモ

于 2014-09-14T12:59:36.060 に答える