有人可以帮我在 Safari 上使用引导程序修复我的代码问题吗？

Question

There is an issue with Bootstrap 4 and Safari broswer on Mac. When using cols inside a row. I was wondering if anyone could help me fix my issue where my form is loading incorrectly on Safari? As you can see on the chrome browser the layout looks how I want it to. However, the form doesn't load correctly on the Safari browser in terms of the layout. Page link I'm talking about .

HOW THE FORM LOOKS ON SAFARI

image 1

HOW THE FORM LOOKS ON CHROME

image 2

CODE TO PAGE

<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

First time ever I solved the problem of my post before someone else :)

It seems there is some code hidden in :before and :after elements inside the rows. Therefore, this causes some issues in Safari web browsers.

I embedded this CSS code onto my page inside the style tag and it worked.

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

New modified code

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