html - Bootstrap 4 布局问题 Firefox OK / 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/[e-mail]">
                <source media="(max-width: 1200px)"
                        srcset="/img/[e-mail]">
                <source media="(min-width: 1201px)"
                        srcset="/img/[e-mail]">
                <img class="img-fluid" src="~/img/[e-mail]" 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;
    }
}

标签： htmlcssflexboxbootstrap-4

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/[e-mail]">
                <source media="(max-width: 1200px)"
                        srcset="/img/[e-mail]">
                <source media="(min-width: 1201px)"
                        srcset="/img/[e-mail]">
                <img class="img-fluid" src="~/img/[e-mail]" 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>