Bootstrap 中间有折叠容器的网格

Question

这是我的第一个问题，希望您能帮助我。我正在尝试使用 bootstrap 网格设置产品概览页面。我连续有 4 个产品用于大屏幕尺寸。对于较小的屏幕尺寸，我希望每行有 2 个产品。

诀窍是，我想将产品详细信息放在行之间的折叠容器中，当我单击产品时，它会打开。它适用于 4 种产品的大屏幕尺寸。但是如何实现折叠的容器在我点击我的产品的那一行之后立即出现，这与我每行有多少产品无关。在较小的尺寸上，折叠的容器会在第二行之后打开，即使我单击第一行中的产品也是如此。

当我将每个折叠的容器放在标记中产品的正后方时，当我打开它时它会将其他产品推开。

抱歉，有点复杂，我希望你明白我的意思。

为了更好地理解，请查看我在 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

不久前，我在这里回答了一个类似的问题：

基本上，您必须将折叠的行放在适当的下方 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>

然后您需要一些额外的 CSS 来 overlay 折叠列，以便它在大屏幕上的整行下全宽。

演示：http://www.codeply.com/go/0QGguzIYCx

对于 Bootstrap 4，由于 flexbox 排序，这种情况更容易。 http://codeply.com/go/qdUGPVL4HJ（字母 6）

http://codeply.com/go/TLJi5MxQ1E (Bootstrap 4.0.0)
http://codeply.com/go/EsRR1nGa36 (Bootstrap 4.3.0)

也可以使用 jQuery/JS 来处理排序逻辑： https://codeply.com/p/Fs1zOQCk1q

Bootstrap 中间有折叠容器的网格

Bootstrap grid with collapsed container in between

grid

twitter-bootstrap

twitter-bootstrap-3

masonry

responsive