9

私はこのhtmlコードを持っています:

        <div class="row fluid">
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
        </div>

携帯電話を除いて、これらの列を 2 つずつ新しい行に移動したいと思います。それは可能ですか？

ありがとう

4

3 に答える 3

6

私が正しく理解していれば、出力が必要です

1 2 3 4

中程度の画面サイズで、

1 2
3 4

小さな画面サイズで

1
2
3
4

非常に小さな画面サイズで

col-xs-12、col-sm-6およびcol-md-3以下のコードのようなクラスを使用してそれを実現できます。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            1
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            2
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            3
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            4
        </div>        
    </div>
</div>

JSFiddleへのリンクは次のとおりです。

于 2015-10-13T16:59:26.480 に答える
1

ほら、これ見て。PC 用に 4 列、小型デバイス用に 2 列、モバイルなどの超小型デバイス用に 1 列があります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="row fluid">
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 clearfix">
                    <img src="img">
                    <div class="img-text"> 
                        Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
                      jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
                </div>
            </div>
        </div>

これがどのように機能するかをよりよく理解するには、ブートストラップのドキュメントを参照してください - http://getbootstrap.com/css/#grid-example-mixed-complete

于 2015-10-13T16:55:24.697 に答える