html - 在引导程序中添加到购物车项目布局

Question

我正在尝试在引导程序中实现布局，但无法像下面给出的那样。

试图使：

我的做法：

列表项无法正确对齐，我想我没有遵循最佳方法。

引导程序

<div class="row">
        <div class="col-md-12">
              <div class="card p-3 mb-2">
                   <div class="d-flex justify-content-between">
                         <div class="d-flex flex-row align-items-center">
                            <span class="btn text-default" id="cart-quantity-392"> 2</span>
                                <div class="icon"> <img src="https://foodrive.ca/uploads/menu/placeholder.png" class="img-icon" alt=""> </div>
                            <div class="ms-2 c-details ml-2">
                                <h6 class="mb-0"> Pjmidway test</h6> 
                                <span> Servings: Menu</span>
                            </div>
                        </div>
                        
                        <div class="badge"> 
                            <span id="sub-total-392">$30.20</span>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12">
                             <div class="col-md-6 ml-5">
                             <div class="mb-0 ">
                                 Size : Small<br> Bread : Italian<br>  
                                 Musterd: $5<br> Cheese: $0<br> Pop: $0.1<br>                                                                                                    
                                     </div>
                                </div>      
                        </div>
                    </div>

                    <div class="mt-1">         
                                <div class="mt-1"> 
                                     <div class="float-right">
                                        <div class="cart-page-actions float-lg-right">
                                            <button type="button" class="btn btn-sm btn-default btn-circle cart-actions" onclick="updateCart('392', true)"><i class="fas fa-plus text-success"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-default btn-circle cart-actions" onclick="updateCart('392', false)"><i class="fas fa-minus text-danger"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-default btn-circle cart-actions" onclick="confirm_modal('https://foodrive.ca/cart/delete/392')"><i class="fas fa-trash-alt text-danger"></i>
                                            </button>
                                        </div>

                                    </div>
                                </div>
                    </div>
                </div>
            </div>
            
        </div>

标签： htmlcssbootstrap-4

Answer 1

我创建了一个快速示例来说明我将如何做到这一点： https ://www.codeply.com/p/tcOsH6aQFf

这主要遵循 Bootstrap 的指南并使用 flexbox。一个很大的优点是它也响应迅速。

看看这个例子，我相信你可以根据自己的需要调整它。这是代码以防万一：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card p-3">
                <div class="d-md-flex d-block">
                    <div class="px-md-2 px-0">2</div>
                    <div>
                        <div class="d-md-flex d-block">
                            <img src="https://via.placeholder.com/200x150">
                            <div class="ml-md-2 ml-0">
                                <h3>Pjmidway test</h3>
                                <span class="text-muted">Servings: Menu</span>
                            </div>
                        </div>
                        <ul class="list-unstyled mt-2">
                            <li>Size : Small</li>
                            <li>Bread : Italian</li>
                            <li>Musterd: $5</li>
                            <li>Cheese: $0</li>
                            <li>Pop: $0.1</li>
                        </ul>
                    </div>
                    <div class="ml-auto">
                        <div class="d-md-flex d-block flex-column h-100 text-md-right">
                            <h4><span class="badge badge-secondary p-2">$30.20</span></h4>
                            <div class="d-flex mt-auto justify-content-md-end">
                                <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                                </svg>
                                </a>
                                <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-dash mx-3" viewBox="0 0 16 16">
                                    <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" />
                                </svg>
                                </a>
                                <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>