Bootstrap Woocommerce Checkout столбцы не выровнены

Question

Я часами пытался выровнять свои столбцы оформления заказа и, наконец, решил проглотить свою гордость и попросить о помощи, я могу представить, что это что-то довольно простое, но я не могу его найти,

Когда я захожу сюда и добавляю что-нибудь в корзину, чтобы увидеть проблему, столбцы не выровнены из стороны в сторону, просто под друг другом.

Запуск с помощью Bootstrap + WordPress + Woocommerce.

СКРИНШОТ

https://ibb.co/bK382Z8

КОД:

<div class="">
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

    <?php if ( $checkout->get_checkout_fields() ) : ?>

        <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

        <div class="row" id="customer_details">
            <div class="col-xs-12 col-md-6">
                <div class="checkbox-form"> 
                    <?php do_action( 'woocommerce_checkout_billing' ); ?>
                    <?php do_action( 'woocommerce_checkout_shipping' ); ?>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
                <h3 id="order_review_heading"><?php _e( 'Your order', '99fy' ); ?></h3>
                <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

                <div id="order_review" class="woocommerce-checkout-review-order">
                    <?php do_action( 'woocommerce_checkout_order_review' ); ?>
                </div>

                <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
            </div>
        </div>

    <?php endif; ?>

</form>

Answer 1

Второй столбец находится не в строке, вы можете увидеть это в HTML. Добавьте второй столбец внутри строки, и он должен работать.

Это примерно должно выглядеть так:

<div class="row" id="customer_details">

  <div class="col-xs-12 col-md-6">
    <div class="checkbox-form">...</div>
  </div>

  <div class="col-xs-12 col-md-6">
     <h3 id="order_review_heading">Your order</h3>
     <div id="order_review" class="woocommerce-checkout-review-order">...</div>
  </div>

</div>