Снова. ОТЛИЧНОЕ РЕШЕНИЕ! Большое спасибо. Я изменил свой проект на BS4, и я работаю как шарм.
ой самый первый вопрос, и я надеюсь, что вы мне поможете. Я пытаюсь настроить страницу обзора продукта с помощью сетки начальной загрузки. У меня есть 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>