在负责任模式下，xs设备上的容器流体宽度减小

Question

Example

OBS：我使用的是ReactJS，原因是“ className”而不是“ class”

bootstrap 4.1

有一个我无法解决的问题。从sm断点开始，我的容器的宽度开始减小，并且在xs设备（例如iphone5s或响应模式）上无法完成100％的操作。我已经在使用col-12。谢谢！

<div className='container-fluid'>
  <div className='row'>
    <div className='col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 bg-primary d-flex align-items-center justify-content-center'>
     <div><h2 className='nav nav-brand text-white'>LOGO</h2></div>
     <nav className='nav navbar d-flex align-items-center justify-content-center'>
     <div className='position-relative d-block d-sm-none d-none d-sm-block d-md-none'>
        <ul className='nav'>
          <li className='nav-item'><a href='#' className='nav-link'><img className='img-fluid' src={imgUiHaveNotifications} style={{width: '1em'}} /></a></li>
          <a href='#'><span className='badge badge-pill badge-danger position-absolute mt-3 shadow mb-5 rounded-circle' style={{top: -5, right: 78}}>5</span></a>
          <li className='nav-item '><a href='#' className='nav-link'><img className='rounded-circle' src={imgAvatar} style={{width: '1.5em'}} /><img src={imgMoreIcon} style={{width: 20}} /></a></li>
        </ul>
      </div>
    </nav>
  </div>
  </div>
  </div>