Question

我一直试图将我的结帐栏并排对齐几个小时，最后决定吞下我的骄傲并寻求帮助，我可以想象这很简单，但是我找不到它，

当我visit here并向购物车中添加任何东西以查看问题时，这些列并非并排对齐，而是彼此对齐。

使用Bootstrap + WordPress + Woocommerce运行。

SCREENSHOT

代码：

<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>

Bootstrap Woocommerce结帐列未对齐

1 个答案: