Laravel website with bootstrap 4 : FOCUS on pages using container-fluid

Question

使用 Laravel5 和 Bootstrap4 构建网站。

我得到了一个 FOUC，其页面的短暂宽度为宽度的 1/5，然后扩展到实际宽度。

原因似乎与我如何使用容器流体有关。 我正在使用“container-fluid”，因为我想要一个垂直的左侧边栏，内容位于主页的左侧。 在一个简单的页面上，代码如下：

<div class="container-fluid px-0">
<div class="d-lg-flex flex-lg-row justify-content-center ">
        @yield('left_side')
    <div class="col-12 col-lg-10 col-xl-10 custom-width">
        <div class="container">
            <div class="row justify-content-center" >
                <div class="col-12">
                      <div class="card page_card" >
                         <div class="mx-auto" style="min-height: 70vh">
                           <p> example..</p>
                         </div>    
                       </div>
                </div>
            </div>
        </div>
    </div>
</div>

当删除我的侧边栏并使用“容器”而不是容器流体时，页面加载后显示的宽度是正确的。

---

更正

这与宽度变化无关。这似乎是我的侧栏，它在中心显示为空白，主页垂直对齐，然后将 2 块水平对齐

---

Addition1 - 我的 FOUC 错误的 GIF

以下是 FOUC 的示例：

FOUC 似乎是由我在包含导航栏的顶部栏中插入的“Google Ad”-div（黄色）引起的。有些网站的广告出现在导航栏上方，因此可以这样做。有什么线索吗？

<!-- for navigation and title on screen < lg -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-lg-none">
    <div class="container">
        <div class="row" >
            <div class="col-2">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarsMain">
                    <ul class="navbar-nav mr-auto" style="width: 200px">
                        <li class="{{Request::is('/') ? 'active' : ''}} nav-item">
                            <a class="nav-link">AAA </a>
                        </li>
                        <li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
                            <a class="nav-link" >BBB</a>
                        </li>
                        <li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
                            <a class="nav-link" >CCC</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="top-bar d-lg-none">
    <hr class="divider-under-title mt-0 d-lg-none" />

    <div class="container">
        <div class="row justify-content-center" >
            <div class="col-12">
                <div class="top-ad d-none d-sm-block">

                    <script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!--  top-ad2 when removed, FOUC disappears -->
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-66666"
                         data-ad-slot="44444"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script async defer>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>

            </div>
            <div class="col-12">

                 <!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
                <div class="ad_block_message_id">
                   Oh nasty adblocker. <i class="em em---1"></i>
                 </div>

            </div>
        </div>
    </div>
</div>



<!-- for market segment on screen >= lg -->
<div class="top-large-bar d-none d-lg-block">
    <!-- for Title on screen >= lg -->
    <div class="row">
        <div class="col-lg-12">
            <h1 id="title" class="d-none d-lg-block">
                <a class="deco-none" href="/">TEST</a><sup><code class="code_sup_text"></code></sup>
            </h1>
        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center" >
            <div class="col-12">
                <div class="top-ad d-none d-sm-block">

                    <script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!--  top-ad2 when removed, FOUC disappears -->
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-666666"
                         data-ad-slot="444444"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script async defer>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>

            </div>
            <div class="col-12">
                 <!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
                <div class="ad_block_message_id">
                   Oh nasty adblocker. <i class="em em---1"></i>
                 </div>
            </div>
        </div>
    </div>
</div>

<!-- for navbar on screen >= lg -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-none d-lg-block mb-2">
    <div class="container">
        <a class="navbar-brand" href="/">{{ config('app.name') }}</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsMain">
            <ul class="navbar-nav mr-auto">
                <li class="{{Request::is('/') ? 'active' : ''}} nav-item">
                    <a class="nav-link" >AAAA <</a>
                </li>
                <li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
                    <a class="nav-link" >BBBBB</a>
                </li>
                <li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
                    <a class="nav-link" >CCCCC</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

听起来您的网站上发生了导致 FOUC 的其他事情 - 并且与样式无关。你的风格在我看来很好。

如果是样式有问题，那是因为 HTML 是在样式表加载之前加载的。因此，除非您在页脚中有样式表，否则我认为这不是问题所在。

我最好的猜测是，您有一些 Javascript 对左列中产生的内容进行了处理，并且在加载页面时尚未完成。如果是这样， - 那么您可以通过在 JavaScript 中添加一个占位符来解决它，直到内容被加载， - 或者在您的整个站点上设置一个预加载器。

为了证明/反驳这一理论，您可以从您的站点中删除所有脚本，并在左栏中（临时）插入一些标准 HTML，以查看是否在没有 FOUC 的情况下加载。

---

回答您的编辑（和 GIF）

感谢您的详细说明。

我看到的第一件事是，您拥有< lg content 和>= lg content 的内容。我不会那样做的。只要浏览器大小发生变化，只需拥有一次并对其进行修改。它更容易维护，并且会减少错误。另外（目前）你有两次data-target="#navbarsMain"。

但这是给您带来问题的代码：

<div class="container">
    <div class="row justify-content-center" >
        <div class="col-12">
            @include('inc.ad_top')  <-- when removed, FOUC disappears
        </div>
        <div class="col-12">
            @include('inc.ad_block_message')
        </div>
    </div>
</div>

我不知道@include('inc.ad_top') 发生了什么。但是，如果这是在加载页面时拉取一些内容，那么这可能是问题的根源，因为直到加载该页面之后才会拉取该内容。在这种情况下，它只会显示一个空白的col-12-container（0px 高度）。

要调试，您可以更改：

        <div class="col-12">
            @include('inc.ad_top')  <-- when removed, FOUC disappears
        </div>

到这里：

        <div class="col-12" style="min-width: 500px; width: 100%; min-height: 500px; height: auto; display: block; overflow: hidden;">
            @include('inc.ad_top')  <-- when removed, FOUC disappears
        </div>

...看看这会给你带来什么。