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