1

デスクトップでは4 blocks on a rowすべて 1 行で表示されますが、ウィンドウのサイズを変更すると (幅を小さくすると)、すべてのブロックが別の行に表示されます。したがってone column with 4 lines、1 行に 2 つの要素を収めることができますが、(4 つの要素) を取得します。

I expect 2 lines with 2 elementsよりコンパクトにするために、1 つのエレメントで 4 つのラインを挿入します。これはどのように行うことができますか？

コードは次のとおりです。

<div class="content row">
    <section class="col col-lg-3">  
        <label>block 1</label>
    </section>
    <section class="col col-lg-3">  
        <label>block 2</label>
    </section>
    <section class="col col-lg-3">  
        <label>block 3</label>
    </section>
    <section class="col col-lg-3">  
        <label>block 4</label>
    </section>
</div>

実際の表示:

------   ------   ------   ------ 
|    |   |    |   |    |   |    |
|    |   |    |   |    |   |    |
------   ------   ------   ------

リサイズ後の表示：

---------------------------------
|                               |
|                               |
---------------------------------
---------------------------------
|                               |
|                               |
---------------------------------
---------------------------------
|                               |
|                               |
---------------------------------
---------------------------------
|                               |
|                               |
---------------------------------

サイズ変更後に必要な表示:

---------------   ---------------
|             |   |             |
|             |   |             |
---------------   ---------------
---------------   ---------------
|             |   |             |
|             |   |             |
---------------   ---------------

言及: ブートストラップ v3.0.0

4

2 に答える 2

1

Grid-Optionsを確認しましたか? 「col-xs-6」や「col-xs-3」などのクラスがあります。これで動作を変更できると思います。

于 2013-10-29T09:34:04.040 に答える
0

試す

<div class="content row">
    <section class="col col-lg-3 col-sm-6">  
        <label>block 1</label>
    </section>
    <section class="col col-lg-3 col-sm-6">  
        <label>block 2</label>
    </section>
    <section class="col col-lg-3 col-sm-6">  
        <label>block 3</label>
    </section>
    <section class="col col-lg-3 col-sm-6">  
        <label>block 4</label>
    </section>
</div>
于 2013-10-29T14:56:12.950 に答える