آفلاین
user-avatar

طراحی card با بوت استرپ 4 شبیه سایت freshDirect

2 سال پیش
توسط محمود آپدیت شد
آفلاین
user-avatar
محمود ( 654 تجربه )
2 سال پیش

با سلام.
من می خوام یک سری 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
محمود
2 سال پیش

تشکر از راهنماییتون و وقتی که گذاشتید.
بجای 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;} 
آفلاین
user-avatar
mehrdad ( 353 تجربه )
2 سال پیش

باید با پوزیشن کار کنی
به سکشن پرنت محصولت پوزیشن relative بده ، بعدش روی هاور فورمت position:absolute کن

آفلاین
user-avatar
developer ( 33462 تجربه )
2 سال پیش
تخصص : برنامه نویس

خب card deck استفاده نکن یک min height به همه بده

آفلاین
user-avatar
محمود ( 654 تجربه )
2 سال پیش

تشکر از راهنماییتون و وقتی که گذاشتید.
بجای 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;} 
برای ارسال پاسخ باید وارد سایت شوید