导航栏和 div`s "breaks" out container-fluid in bootstrap 4

Question

我正在与 bootstrap 合作，我遇到了一个我认为很简单但看不到的问题。有问题的事实是我将所有 div 都放在容器流体中，但是当在单元格 phone 上测试它时，例如在 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 引起的。要使 table 响应，您可以用 .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/

导航栏和 div`s "breaks" out container-fluid in bootstrap 4

Navbar and div`s "breaks" out of container-fluid in bootstrap 4

css

bootstrap-4

grid

containers

col