Bootstrap4在移动设备的两行和三行中对齐付款按钮

勇敢的大师

我有9个付款按钮。我想在第一行中对齐5个按钮，在第二行中将其余4个按钮对齐。但是在手机中，我想以3 x 3样式显示9个按钮。我正在使用Bootstrap4。我当前的html如下。我怎样才能做到这一点？

<div class="payment-btns mt-4">
    <div class="row mx-auto">
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/PayPal.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/VISA.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/giropay.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/SOFORT.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/Belfius.png" ></a>

       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/KBC.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/CBC.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/iDEAL.png" ></a>
       <a class="col" href="javascript:void(0);"><img src="./assets/img/payment/Bancontact.png" ></a>
    </div>
</div>

Akshita karetiya

尝试使其不使用引导程序4，

.button-div{
	width: 20%;
}
@media (max-width: 575px){
	.button-div{
	width: calc(100% / 3);
}
}

<div class="payment-btns mt-4">
    <div class="row mx-auto justify-content-center">
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/PayPal.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/VISA.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/giropay.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/SOFORT.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/Belfius.png" ></a>

       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/KBC.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/CBC.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/iDEAL.png" ></a>
       <a class="button-div" href="javascript:void(0);"><img src="./assets/img/payment/Bancontact.png" ></a>
    </div>
</div>

仅使用html和CSS：

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。