Navbar和div在引导程序4中“突破”容器流体

问题描述

我正在使用引导程序，但遇到一个我理解很简单但看不到的问题。 有问题的事实是，我所有的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>

解决方法

溢出问题是由表引起的。要使表具有响应性，可以用.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/