ブートストラップ/基礎スタック行/列

Question

私は非常に単純な2行のスタッキングを達成しようとしていますが、解決策を見つけることができないようです。私はソリューションのためにBootstrapとFoundationを試しました。 写真でわかるように、私は2列、それぞれ3列あります。画面のサイズが中小の場合は、列が2つになる必要があります。見出し4は、見出し3の下に見出し3、見出し5の横に表示されます。見出し6は後に続く。

大変ありがとうございます。

how it is

what I'm trying to achieve

ブートストラップコード

<div class="row> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading1</h2> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading2</h2> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading3</h2> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading4</h2>  
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading5</h2> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading6</h2> 
 
    </div> 
 
</div>

財団コード

<div class="row"> 
 
    <div class="large-4 medium-6 columns"> 
 
    <div class="primary callout"> 
 
     <p>Four columns</p> 
 
    </div> 
 
    </div> 
 
    <div class="large-4 medium-6 columns"> 
 
    <div class="primary callout"> 
 
     <p>Four columns</p> 
 
    </div> 
 
    </div> 
 
    <div class="large-4 medium-6 end columns"> 
 
    <div class="primary callout"> 
 
     <p>Four columns</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="large-4 medium-6 columns"> 
 
    <div class="primary callout"> 
 
     <p>Four columns</p> 
 
    </div> 
 
    </div> 
 
    <div class="large-4 medium-6 columns"> 
 
    <div class="primary callout"> 
 
     <p>Four columns</p> 
 
    </div> 
 
    </div> 
 
    <div class="large-4 medium-6 columns"> 
 
    <div class="primary callout"> 
 
     <p>Four columns</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ブートストラップでやりましょう。

セルが6つの行が1つだけ必要です。ブートストラップwraps the extra cells onto new linesが原因です。

クラスcol-xs-6のブロックは、6列から12列です。画面の幅のちょうど半分です。このクラスは、a condition for a wider screenが動作し始めるまで動作します。ブロックcol-sm-4のブロックは、画面が992px以上の場合、画面の幅の3分の1を占めます。

結果を確認してください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <h2>Heading1</h2> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <h2>Heading2</h2> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <h2>Heading3</h2> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <h2>Heading4</h2> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <h2>Heading5</h2> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <h2>Heading6</h2> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

つの異なる行を使用する必要はありません。ブートストラップのデフォルトでは、次の行に余分なセル/列がラップされます。 Read documentation

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <div class="container"> 
 
<div class="row"> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading1</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
      sed do eiusmod tempor 
 
      incididunt ut labore et dolore magna aliqua. 
 
      Ut enim ad minim veniam, quis nostrud 
 
      exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate 
 
      velit esse cillum dolore eu fugiat nulla pariatur 
 
     </p> 
 
     <button class="btn btn-default"> more info.</button> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading2</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
      sed do eiusmod tempor 
 
      incididunt ut labore et dolore magna aliqua. 
 
      Ut enim ad minim veniam, quis nostrud 
 
      exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate 
 
      velit esse cillum dolore eu fugiat nulla pariatur 
 
     </p> 
 
     <button class="btn btn-default"> more info.</button> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading3</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
      sed do eiusmod tempor 
 
      incididunt ut labore et dolore magna aliqua. 
 
      Ut enim ad minim veniam, quis nostrud 
 
      exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate 
 
      velit esse cillum dolore eu fugiat nulla pariatur 
 
     </p> 
 
     <button class="btn btn-default"> more info.</button> 
 
    </div> 
 

 

 

 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading4</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
      sed do eiusmod tempor 
 
      incididunt ut labore et dolore magna aliqua. 
 
      Ut enim ad minim veniam, quis nostrud 
 
      exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate 
 
      velit esse cillum dolore eu fugiat nulla pariatur 
 
     </p> 
 
\t \t <button class="btn btn-default"> more info.</button> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading5</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
      sed do eiusmod tempor 
 
      incididunt ut labore et dolore magna aliqua. 
 
      Ut enim ad minim veniam, quis nostrud 
 
      exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate 
 
      velit esse cillum dolore eu fugiat nulla pariatur 
 
     </p> 
 
     <button class="btn btn-default"> more info.</button> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
     <h2>Heading6</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
      sed do eiusmod tempor 
 
      incididunt ut labore et dolore magna aliqua. 
 
      Ut enim ad minim veniam, quis nostrud 
 
      exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate 
 
      velit esse cillum dolore eu fugiat nulla pariatur 
 
     </p> 
 
     <button class="btn btn-default"> more info.</button> 
 
    </div> 
 
</div> 
 
    </div>