طراحی card با بوت استرپ 4 شبیه سایت freshDirect
با سلام.
من می خوام یک سری card برای محصولاتم داشته باشم که ارتفاع مساوی داشته باشند برای همین از کلاس card-deck استفاده می کنم.
یک form هم داخل card دارم که می خوام وقتی روی کارد Hover کردم نمایش داده بشه.
اما وقتی form اضافه میشه card های دیگر هم به همان اندازه ارتفاعشان افزایش داده میشه.
من میخوام فقط ارتفاع card ی که hover شده اضافه بشه و ارتفاع اضافه روی بقیه card ها بیاد ( z-index : 2 )
شبیه سایت : https://www.freshdirect.com/index.jsp
<div class="card-deck justify-content-around text-center">
<div class="card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p>
</div>
<span>text</span>
<p class="form-control-sm"> <small>10000</small></p>
<form action="#" class="cardform">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="text" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<p class="form-control-sm"><small>10000 </small></p>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class="card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p> </div>
<div class="form-group">
<select class="form-control-sm" id="exampleFormControlSelect1">
<option>option</option>
<option>option</option>
</select>
</div>
<form action="#" >
<div class="form-group d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="text" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<p class="form-control-sm"> <small>10000 </small></p>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class="card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p> </div>
<span>text</span>
<p class="form-control-sm"> <small>10000 </small></p>
<form action="#">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="text" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<p class="form-control-sm"><small>10000 </small></p>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class="card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><a href="#">text</a></h5>
<p class="card-text">text</p>
</div>
<span>text</span>
<p class="form-control-sm"> <small>10000 </small></p>
<form action="#">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="text" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<p class="form-control-sm"> <small>10000 </small></p>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class="card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p> </div>
<form action="#">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="text" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class="card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p> </div>
<form action="#">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="number" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class=" card product ml-2">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p> </div>
<form action="#">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="number" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
<div class=" card product">
<img class="card-img-top" src="images/bonshan.jpg" class="img-fluid" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">text</h5>
<p class="card-text">text</p> </div>
<form action="#">
<div class="d-flex justify-content-center align-items-center text-light my-2">.
<span class="ti-plus bg-success p-1"></span>
<input type="number" class="form-control form-control-sm w-25 mx-2 text-center" value="1">
<span class="ti-minus bg-success p-1 text-light"></span>
</div>
<button type="submit" class="btn btn-outline-warning mb-2">افزودن به سبد خرید</button>
</form>
</div>
</div>
style
.card-deck .card { min-width : 241px; }
.card.product form { display : none;}
.card.product:hover form {display : block; } گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
محمود
@gt.libertine
6 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
0
تشکر از راهنماییتون و وقتی که گذاشتید.
بجای card deck از row استفاده کردم و یک min height به همه دادم.
سکشن پرنت محصول پوزیشن relative داشت، بعدش روی هاور فورم position:absolute کردم.
در نهایت به شکل زیر در اومد
<div class="row justify-content-around text-center">CSS
.card.product {
min-height: 330px;
min-width: 241px;
max-width: 241px;
}
.card.product form {display:none}
.card.product:hover form {display:block;position: absolute;top:320px;background-color: #fff;}
.card.product:hover {z-index: 2;} 
گزارش تخلف
کپی کردن
1
باید با پوزیشن کار کنی
به سکشن پرنت محصولت پوزیشن relative بده ، بعدش روی هاور فورمت position:absolute کن
گزارش تخلف
کپی کردن
1
محمود
@gt.libertine
6 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
0
تشکر از راهنماییتون و وقتی که گذاشتید.
بجای card deck از row استفاده کردم و یک min height به همه دادم.
سکشن پرنت محصول پوزیشن relative داشت، بعدش روی هاور فورم position:absolute کردم.
در نهایت به شکل زیر در اومد
<div class="row justify-content-around text-center">CSS
.card.product {
min-height: 330px;
min-width: 241px;
max-width: 241px;
}
.card.product form {display:none}
.card.product:hover form {display:block;position: absolute;top:320px;background-color: #fff;}
.card.product:hover {z-index: 2;}