محمود
4 سال پیش توسط محمود مطرح شد
3 پاسخ

طراحی 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; } 

html_css
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
محمود
@gt.libertine 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;} 

mehrdad
@mehrdad.shahanii 4 سال پیش مطرح شد
1

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


developer
تخصص : برنامه نویس
@developer 4 سال پیش مطرح شد
1

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


محمود
@gt.libertine 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;} 

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام