导航栏和 div 在引导程序 4 中从容器流体中“中断”

Question

我正在使用引导程序，但我遇到了一个问题，我理解它很简单，但我看不到它。 有问题的事实是我所有的 div 都在一个容器流体中，但是当在手机上测试它时，例如在 435x600 分辨率下，导航栏是一半。这是一个示例，我在相关点和代码下方制作了一个框。

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   LOGO 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  </div>
 <form class="form-inline my-2 my-lg-0 badge-log">
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 <div class="navbar-nav"></div>
 </div>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
    target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
   aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
      </form>
    </nav>
    <div class="container-fluid">
    <div class="row">
   <div class="col-1"></div>
  <div class="col-10">
    <table class="table">
   TABLA CONTENT
   </table>
     </div>
    <div class="col-1"></div>
  </div>
    </div>

Answer 1

溢出问题是由表引起的。要使表格具有响应性，您可以使用 .table-responsive 包装它们：https://getbootstrap.com/docs/4.5/content/tables/#always-responsive

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>QTY</th>
                <th>Category</th>
            </tr>
        </thead>
    </table>
</div>

演示： https://jsfiddle.net/davidliang2008/swr38daf/2/