有人可以帮我解决Safari上的引导程序代码问题吗？

Question

在Mac上，Bootstrap 4和Safari浏览器存在问题。当在行内使用cols时。我想知道是否有人可以帮助我解决我的表单在Safari上加载不正确的问题？如您在chrome浏览器中所见，布局看起来像我想要的那样。但是，就布局而言，该表单无法正确加载到Safari浏览器中。我正在说的是页面链接about。

如何查找Safari上的表单

image 1

如何在铬上查看表格

image 2

代码到页面

<div class="rates-form-shortcode mt-5">
    <div class="text-center">
        <strong style="font-weight: bolder;"><h5><u style="font-weight: 900;">BOOK A JOB</u></h5></strong>
    </div>
    <?php if (isset($_GET['success']) && !empty($_GET['success']) && $_GET['success'] == 'true'): ?>
        <div class="custom-alert-success alert alert-success mt-3" role="alert">
            Job has been booked successfully.
        </div>
    <?php endif; ?>
    <form action="<?php echo admin_url('admin-post.php'); ?>" method="POST">
        <input type="hidden" name="action" value="ccdjps_submit_rates_form">
        <input type="hidden" name="rate_form_subject" value="<?php echo $atts['subject']; ?>">
        <input type="hidden" name="form_refferer" value="<?php echo get_permalink(); ?>">
        <div class="input-body mt-5">
            <div class="form-group row">
                <label for="date" class="col-sm-2 col-form-label">Date</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control datepicker" id="date" name="date" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="job-reference" class="col-sm-2 col-form-label">Job Reference</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="job-reference" name="job_reference" required>
                </div>
            </div>
            <div class="collection-delivery-row row mt-4">
                <div class="col-sm-6">
                    <div class="text-center mb-3">
                        <h6 style="font-weight: bold;">Collection Address</h6>
                    </div>
                    <div class="form-group row">
                        <label for="collection-full-name" class="col-sm-4 col-form-label">Full Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-full-name" name="collection_full_name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-address-line-1" name="collection_address_line_1" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-address-line-2" name="collection_address_line_2">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-address-line-3" name="collection_address_line_">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-town" class="col-sm-4 col-form-label">Town</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-town" name="collection_town" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-post-code" class="col-sm-4 col-form-label">Post code</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-post-code" name="collection_post_code" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-country" class="col-sm-4 col-form-label">Country</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-country" name="collection_country" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-phone-number" name="collection_phone_number" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="text-center mb-3">
                    <h6 style="font-weight: bold;">Delivery Address</h6>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-full-name" class="col-sm-4 col-form-label">Full Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-full-name" name="delivery_full_name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-address-line-1" name="delivery_address_line_1" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-address-line-2" name="delivery_address_line_2">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-address-line-3" name="delivery_address_line_3">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-town" class="col-sm-4 col-form-label">Town</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-town" name="delivery_town" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-post-code" class="col-sm-4 col-form-label">Post code</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-post-code" name="delivery_post_code" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-country" class="col-sm-4 col-form-label">Country</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-country" name="delivery_country" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-phone-number" name="delivery_phone_number" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row mt-3">
                <label for="number-of-items" class="col-sm-2 col-form-label">No. of Items</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="number-of-items" name="number_of_items" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="weight" class="col-sm-2 col-form-label">Weight</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="weight" name="weight" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="height" class="col-sm-2 col-form-label">Height</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="height" name="height" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="length" class="col-sm-2 col-form-label">Length</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="length" name="length" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="width" class="col-sm-2 col-form-label">Width</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="width" name="width" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="service" class="col-sm-2 col-form-label">Service</label>
                <div class="col-sm-10">
                    <select id="service" class="form-control" name="service" required>
                        <option value="">Choose...</option>
                        <option value="UK Overnight">UK Overnight</option>
                        <option value="International">International</option>
                        <option value="Chauffeur Service">Chauffeur Service</option>
                        <option value="Removals">Removals</option>
                        <option value="Parcels/Pallets">Parcels/Pallets</option>
                        <option value="Same Day Delivery">Same Day Delivery</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="additional-collection-notes">Additional Collection Notes</label>
                        <textarea name="additional_collection_notes" id="additional-collection-notes" cols="30" rows="3"></textarea>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="additional-delivery-notes">Additional Delivery Notes</label>
                        <textarea name="additional_delivery_notes" id="additional-delivery-notes" cols="30" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div style="margin-top: 2rem;">
                <button class="custom-btn themestek-vc_general themestek-vc_btn3 themestek-vc_btn3-size-md themestek-vc_btn3-shape-square themestek-vc_btn3-style-flat themestek-vc_btn3-weight-yes themestek-vc_btn3-color-skincolor">SUBMIT</button>
            </div>
        </div>
    </form>
</div>

Answer 1

我第一次在别人之前解决我的帖子的问题：）

似乎行内的：before和：after元素中隐藏了一些代码。因此，这会导致Safari Web浏览器中出现一些问题。

我将此CSS代码嵌入到style标记内的页面上，并且可以正常工作。

.row:before, .row:after {display: none !important;

新修改的代码

<style>
.row:before, .row:after {display: none !important;}
</style>

<div class="rates-form-shortcode mt-5">
    <div class="text-center">
        <strong style="font-weight: bolder;"><h5><u style="font-weight: 900;">BOOK A JOB</u></h5></strong>
    </div>
    <?php if (isset($_GET['success']) && !empty($_GET['success']) && $_GET['success'] == 'true'): ?>
        <div class="custom-alert-success alert alert-success mt-3" role="alert">
            Job has been booked successfully.
        </div>
    <?php endif; ?>
    <form action="<?php echo admin_url('admin-post.php'); ?>" method="POST">
        <input type="hidden" name="action" value="ccdjps_submit_rates_form">
        <input type="hidden" name="rate_form_subject" value="<?php echo $atts['subject']; ?>">
        <input type="hidden" name="form_refferer" value="<?php echo get_permalink(); ?>">
        <div class="input-body mt-5">
            <div class="form-group row">
                <label for="date" class="col-sm-2 col-form-label">Date</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control datepicker" id="date" name="date" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="job-reference" class="col-sm-2 col-form-label">Job Reference</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="job-reference" name="job_reference" required>
                </div>
            </div>
            <div class="collection-delivery-row row mt-4">
                <div class="col-sm-6">
                    <div class="text-center mb-3">
                        <h6 style="font-weight: bold;">Collection Address</h6>
                    </div>
                    <div class="form-group row">
                        <label for="collection-full-name" class="col-sm-4 col-form-label">Full Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-full-name" name="collection_full_name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-address-line-1" name="collection_address_line_1" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-address-line-2" name="collection_address_line_2">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-address-line-3" name="collection_address_line_">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-town" class="col-sm-4 col-form-label">Town</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-town" name="collection_town" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-post-code" class="col-sm-4 col-form-label">Post code</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-post-code" name="collection_post_code" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-country" class="col-sm-4 col-form-label">Country</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-country" name="collection_country" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="collection-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="collection-phone-number" name="collection_phone_number" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="text-center mb-3">
                    <h6 style="font-weight: bold;">Delivery Address</h6>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-full-name" class="col-sm-4 col-form-label">Full Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-full-name" name="delivery_full_name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-address-line-1" name="delivery_address_line_1" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-address-line-2" name="delivery_address_line_2">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-address-line-3" name="delivery_address_line_3">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-town" class="col-sm-4 col-form-label">Town</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-town" name="delivery_town" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-post-code" class="col-sm-4 col-form-label">Post code</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-post-code" name="delivery_post_code" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-country" class="col-sm-4 col-form-label">Country</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-country" name="delivery_country" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="delivery-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="delivery-phone-number" name="delivery_phone_number" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row mt-3">
                <label for="number-of-items" class="col-sm-2 col-form-label">No. of Items</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="number-of-items" name="number_of_items" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="weight" class="col-sm-2 col-form-label">Weight</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="weight" name="weight" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="height" class="col-sm-2 col-form-label">Height</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="height" name="height" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="length" class="col-sm-2 col-form-label">Length</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="length" name="length" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="width" class="col-sm-2 col-form-label">Width</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="width" name="width" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="service" class="col-sm-2 col-form-label">Service</label>
                <div class="col-sm-10">
                    <select id="service" class="form-control" name="service" required>
                        <option value="">Choose...</option>
                        <option value="UK Overnight">UK Overnight</option>
                        <option value="International">International</option>
                        <option value="Chauffeur Service">Chauffeur Service</option>
                        <option value="Removals">Removals</option>
                        <option value="Parcels/Pallets">Parcels/Pallets</option>
                        <option value="Same Day Delivery">Same Day Delivery</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="additional-collection-notes">Additional Collection Notes</label>
                        <textarea name="additional_collection_notes" id="additional-collection-notes" cols="30" rows="3"></textarea>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="additional-delivery-notes">Additional Delivery Notes</label>
                        <textarea name="additional_delivery_notes" id="additional-delivery-notes" cols="30" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div style="margin-top: 2rem;">
                <button class="custom-btn themestek-vc_general themestek-vc_btn3 themestek-vc_btn3-size-md themestek-vc_btn3-shape-square themestek-vc_btn3-style-flat themestek-vc_btn3-weight-yes themestek-vc_btn3-color-skincolor">SUBMIT</button>
            </div>
        </div>
    </form>
</div>