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

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

لینک کوتاه اشتراک گذاری

0

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

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

لینک کوتاه اشتراک گذاری

1

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

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

لینک کوتاه اشتراک گذاری

1

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

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

لینک کوتاه اشتراک گذاری

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;} 
برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.