Bootstrap 4布局问题Firefox正常/ Chrome NOT

Question

所以，我有这部分代码，它在firefox中工作得很好，但在chrome或opera上，布局完全被破坏了，有人能发现我做错了什么吗？

<div class="row broadband-block">
    <div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 d-flex justify-content-center flex-column broadband-main ">
        <div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
            <picture>
                <source media="(max-width: 576px)"
                        srcset="/img/broadband-icon@mob.png">
                <source media="(max-width: 1200px)"
                        srcset="/img/broadband-icon@med.png">
                <source media="(min-width: 1201px)"
                        srcset="/img/broadband-icon@1366.png">
                <img class="img-fluid" src="~/img/broadband-icon@1366.png" alt="broadband-icon">
            </picture>
            <h2 class="electricity-header">Broadband</h2>
        </div>

        <h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
        <p class="electricity-text">
            We pride ourselves on the quality of our products and award-winning customer service. We understand how important
            the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
            with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
            you the flexibility to grow.<br /><br />

            Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />

            Not sure which solution is right for your business? Call one of our advisors
            today on <span class="voice-number-color">#######</span>
        </p>
        <div class="col-12 col-sm-8 d-flex justify-content-center justify-content-sm-start landing-page-buttons">
            <button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
                <span class="text">CONTACT US</span>
            </button>
        </div>
    </div>
</div>

/ CSS /

.broadband-main {
    padding-top: 50px;

    @include for-phone {
        padding-top: 20px;
        padding-left: 30px;
    }
}

Answer 1

d-flex类会导致页面(和按钮)在Chrome上显示不正确，但不会影响Firefox、Safari和其他浏览器。通过去掉它，页面现在可以在所有浏览器上正确显示。

下面是CSS：

.broadband-main {
    padding-top: 50px;

    @include for-phone {
        padding-top: 20px;
        padding-left: 30px;
    }
}

下面是HTML：

<div class="row broadband-block container">
    <div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 justify-content-center flex-column broadband-main ">
        <div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
            <picture>
                <source media="(max-width: 576px)"
                        srcset="/img/broadband-icon@mob.png">
                <source media="(max-width: 1200px)"
                        srcset="/img/broadband-icon@med.png">
                <source media="(min-width: 1201px)"
                        srcset="/img/broadband-icon@1366.png">
                <img class="img-fluid" src="~/img/broadband-icon@1366.png" alt="broadband-icon">
            </picture>
            <h2 class="electricity-header">Broadband</h2>
        </div>

        <h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
        <p class="electricity-text">
            We pride ourselves on the quality of our products and award-winning customer service. We understand how important
            the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
            with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
            you the flexibility to grow.<br /><br />

            Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />

            Not sure which solution is right for your business? Call one of our advisors
            today on <span class="voice-number-color">#######</span>
        </p>
        <div class="col-12 col-sm-8 justify-content-center justify-content-sm-start landing-page-buttons">
            <button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
                <span class="text">CONTACT US</span>
            </button>
        </div>
    </div>
</div>