两个按钮彼此相邻HTML CSS BOOTSTRAP

问题描述 投票:0回答:1

我的设计有问题。

我在产品页面上有两个按钮。但是,因为一个人处于某种形式,所以它们彼此重叠(请参见图片)。

buttons

我想使两个按钮彼此相邻。有人可以帮我吗?在下面,我添加了HTML和CSS代码。

谢谢!

HTML:

<!DOCTYPE HTML>
<div class="container text-center">
            <div class="sale">
                <h1>On Sale</h1>
                <p class="text-secondary">
                    We have new sales promotions online for a short period of time every day. We offer products from
                    popular labels and luxury brands in the lifestyle segment up to 75% cheaper than the
                    recommended retail price.
                </p>
            </div>
</div>

        <section class="on-sale">
            <div class="container">
                <div class="row">

                <?php
                    for($i = 0; $i < $countProductItems && $i < 4; $i++){
                        ?>
                        <div class="col-md-3">
                        <div class="product-top">
                        <a href="products/product-page.php?product=<?php echo ($saleProducts[$i]['strProductNaam']); ?>" onclick="POST"><img src="<?php echo ($saleProducts[$i]['imgProduct1']);?>" class="img-fluid" alt="Product1"/></a>
                            <div class="overlay-right text-center">
                                <button type="button" class="btn btn-secondary" title="Quick Shop">
                                <a href="products/product-page.php?product=<?php echo ($saleProducts[$i]['strProductNaam']); ?>" onclick="POST"><i class="fa fa-eye text-white"></i></a>
                                </button>
                                <form action="includes/shopping-cart.inc.php?action=add&id=<?php echo ($saleProducts[$i]['ID'])?>" method="post">
                                    <input class="text-center" type="hidden" name="quantity" value="1"/>
                                    <input type="hidden" name="index-page" value="index">
                                    <input type="hidden" name="product-name" value="<?php echo ($saleProducts[$i]['strProductNaam']); ?>">
                                    <input type="hidden" name="product-price" value="<?php echo ($saleProducts[$i]['strSalePrijs']); ?>">
                                    <button type="submit" class="btn btn-secondary " title="Add to cart" name="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
                                </form>
                            </div>
                        </div>
                        <div class="product-bottom text-center">
                        <p>
                                <?php rating_star(($saleProducts[$i]['RatingStar'])) ?>
                            </p>
                            <p><h3><?php echo ($saleProducts[$i]['strProductNaam']); ?></h3></p>
                            <?php sale_product(($saleProducts[$i]['intPrijs']), ($saleProducts[$i]['strSalePrijs']))?>
                        </div>
                    </div>
                    <?php
                    }
                ?>

                </div>
            </div>
        </section>
</html>   

CSS:

.container .sale{
    padding: 3rem 0;
    }

    .container .sale{
        font-family: var(--gugi);
    }

    .container .sale{
        padding: 0.5% 25%;
        font-size: 0.9em;
    }

.on-sale{
    margin: 50px 0;
}

.on-sale img{
    width: 100%;
    padding: 20px;
    transition: 1s;
    cursor: pointer;
}

.on-sale img:hover{
    transform: scale(1.1);
}

.product-top{
    width:100%;
    display: inline-block;

}

.product-bottom .fa{
    color: orange;
    font-size: 10px;
}

.product-bottom h3{
    font-size: 20px;
    font-weight: bold;
}

.product-bottom h5{
    font-size: 15px;
    padding-bottom: 10px;
}

.make_red {
        color: red;
}        

//代码填充文本[错误]-nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg

html css twitter-bootstrap bootstrap-4
1个回答
0
投票

您可以使用flex轻松完成。

<div class="overlay-right d-flex justify-content-center">
    <button type="button" class="btn btn-secondary"></button>
    <form action="#" method="post">
        <button type="submit" class="btn btn-secondary">
          <i class="fa fa-shopping-cart"></i>
        </button>
     </form>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.