bootstrap-4 - Bootstrap Radio 复选框在 992px 下不可选择

Question

我的代码对于不同的屏幕尺寸几乎相同，但所有单选按钮在 992px 下都无法选择，但除了不同屏幕尺寸的轻微布局更改外，我看不到我的代码有任何差异

我的代码：

<form name="PMsack30" action="order-summary.php" method="get" id="PMsack30">
  <input type="hidden" name="product_name" value="Puckamuck 30 Litre Sack">
  <input type="hidden" name="shortcode" value="PMsack30">
  <div class="product">
    <div class="row">
      <div class="col align-self-center" style="max-width: 160px;"><img class="img-thumbnail" src="img/products/puckamuck-60ltrsack.png" /></div>
      <div class="col">
        <div class="product-name">Puckamuck 30 Litre Sack</div>
        <div class="product-description">This is a more manageable sized quantity, easier to distribute</div>
        <p style="float: left; font-size: 12px; color: #CC0000; margin-top: 10px;">Please carefully check your Postcode <u>strictly</u> adheres to the delivery radius</p>

        <div class="clearfix"></div>

        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="PMsack301" name="order_details" value="1" required>
          <label class="custom-control-label" for="PMsack301">15 Sacks (within 10 miles)</label>
        </div>

        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="PMsack302" name="order_details" value="2" required>
          <label class="custom-control-label" for="PMsack302">20 Sacks (between 10-15 miles)</label>
        </div>

        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="PMsack303" name="order_details" value="3" required>
          <label class="custom-control-label" for="PMsack303">25 Sacks (between 15-20 miles)</label>
        </div>

        <div class="form-inline">
          <label style="width:100px; margin-right:20px;">Extra Sacks</label>
          <input class="form-control form-inline" style="width:80px;" type="number" name="additions">
        </div>

      </div>
      <!--col-->

      <div class="col align-self-center" style="max-width: 160px;">
        <div class="btn-container">

          <button class="btn btn-product btn-product2" type="button" data-toggle="modal" data-target="#PMsack30details">details</button>
          <div class="clearfix"></div>
          <button class="btn btn-product" style="margin-top:3px;" type="submit">Buy Now</button>

        </div>
        <!--btn-container-->
      </div>
      <!--col-->
    </div>
    <!--row-->
  </div>
  <!--product-->
</form>

标签： bootstrap-4radio-button