折りたたまれたコンテナを挟んだブートストラップグリッド

Question

ここは私の最初の質問です。私があなたを助けてくれることを願っています。私はブートストラップグリッドを使って製品概要ページを設定しようとしています。私は大きな画面サイズのために4つの製品を続けています。小さな画面サイズの場合は、1行に2つの製品が必要です。

トリックは、商品をクリックすると開いている行の間に折りたたまれたコンテナ内に商品の詳細が表示されます。 4つの製品で大画面サイズに対応しています。しかし、折りたたまれたコンテナが行の直後に表示されているのは、行ごとにどれだけ多くの商品があるかとは無関係に、自分の製品をクリックした場所です。小さいサイズでは、最初の行の商品をクリックしても、2番目の行の後に折りたたまれたコンテナが開きます。

私は、折りたたみコンテナをすべてマークアップで商品の後ろに置くと、それを開くときに他の商品を押しのけます。

申し訳ありませんが、それは少し複雑です、私はあなたが私の意味を知って欲しいと思います。

わかりやすくするために、私のペンでcodepenを見てください。

できるだけシンプルにしておきたいと思っています。すべての

http://codepen.io/auftakt/pen/PWxJVX

タンク。

$('.collapse-btn').on('click',function(){$('.collapse').collapse('hide');})

body { 
 
    margin-top: 50px; 
 
    overflow-y: scroll; 
 
} 
 

 
.img-responsive { 
 
    width:100%; 
 
} 
 

 
.col-xs-6{ 
 
    margin-bottom: 20px; 
 
} 
 

 
.product-detail { 
 
    width: 100%; 
 
    height:300px; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.no-padding-left { 
 
    padding-left: 0; 
 
} 
 

 
.product-collapse-wrap > div { 
 
    margin-bottom: 20px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-1" aria-expanded="false" aria-controls="Product-1"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-2" aria-expanded="false" aria-controls="Product-2"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-3" aria-expanded="false" aria-controls="Product-3"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-4" aria-expanded="false" aria-controls="Product-4"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="product-collapse-wrap"> 
 
    <div id="Product-1" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 1</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="Product-2" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 2</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="Product-3" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 3</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="Product-4" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 4</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-5" aria-expanded="false" aria-controls="Product-5"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-6" aria-expanded="false" aria-controls="Product-6"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-7" aria-expanded="false" aria-controls="Product-7"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-3 col-xs-6"> 
 
     <a class="collapse-btn" data-toggle="collapse" href="#Product-8" aria-expanded="false" aria-controls="Product-8"> 
 
     <img class="img-responsive" src="http://placehold.it/600x600"> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="product-collapse-wrap"> 
 
    <div id="Product-5" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 5</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="Product-6" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 6</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="Product-7" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 7</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="Product-8" class="col-md-12 collapse"> 
 
     <div class="row"> 
 
     <div class="col-md-6 no-padding-left"> 
 
      <div class="img-responsive product-detail" style="background-image: url('http://placehold.it/800x600')"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Product 8</h3> 
 
      <ul> 
 
      <li>Flachheizkörper</li> 
 
      <li>Planheizkörper</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

しばらく前に、私はここに同様の質問に答え：Bootstrap responsive grid layout (3 columns) with collapsed/hidden col-12 beneath each grid element

を基本的にあなたが最小のレイアウトに合わせて、適切なcol-*以下の折りたたまれた行を配置する必要があります。だからあなたの場合：

<div class="row"> 
      <div class="col-md-3 col-xs-6"> 
       <a href="#one" data-toggle="collapse"><img src="//placehold.it/600"></a> 
      </div> 
      <div class="col-md-3 col-xs-6"> 
       <a href="#two" data-toggle="collapse"><img src="//placehold.it/600"></a> 
      </div> 
      <div class="col-xs-12 overlay collapse" id="one"> 
       1 
      </div> 
      <div class="col-xs-12 overlay collapse" id="two"> 
       2 
      </div> 
      <div class="col-md-3 col-xs-6"> 
       <a href="#three" data-toggle="collapse"><img src="//placehold.it/600"></a> 
      </div> 
      <div class="col-md-3 col-xs-6"> 
       <a href="#four" data-toggle="collapse"><img src="//placehold.it/600"></a> 
      </div> 
      <div class="col-xs-12 overlay collapse" id="three"> 
       3 
      </div> 
      <div class="col-xs-12 overlay collapse" id="four"> 
       4 
      </div> 
    </div> 

そして、あなたはそれがより大きな画面で行全体の下全幅だように崩壊列をoverlayするためにいくつかの余分なCSSを必要とするだろう。

デモ：http://www.codeply.com/go/0QGguzIYCx

ブートストラップ4の場合、このシナリオは容易ため .. http://codeply.com/go/qdUGPVL4HJ（アルファ6）

http://codeply.com/go/TLJi5MxQ1E（ブートストラップ4.0.0）を注文フレックスボックスの