WooCommerce 和 Bootstrap 冲突

Question

本页建议的解决方案解决了 WooCommerce 样式和 Bootstrap 4 之间的冲突，部分有效使用 bootstrap 4 时。将以下块添加到自定义 CSS 修复了结帐页面问题：

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce form .form-row {
  display: block;
}
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  max-width: unset;
}

我还添加了以下样式来修复访问时地址损坏的样式： https://example.com/my-account/edit-address/：

.woocommerce-Addresses {
    display: block !important;
}

.woocommerce-Address-title > * {
    display: block !important;
}

上述配置仍未解决的一个冲突是，当用户未签名时，以下 URL 上我的帐户页面会损坏in：

https://example.com/my-account/

我有两个问题：

1. 使用 bootstrap 4 时如何更正 https://example.com/my-account/ 页面的样式？
2. 此解决方案不能完全与 bootstrap 5.1.3 配合使用。使用 Bootstrap 5.1.3 并应用上述自定义样式会产生损坏的结账页面，但它会为以下位置提供正确的样式： https://example.com/my-account/edit-address/

https ://example.com/my-account/ –>已通过使用 bootstrap 5.1.3 进行更正，无需任何自定义 CSS。 问题：使用 bootstrap 5.1.3 时如何更正结帐页面样式？