【问题标题】：Bootstrap columns are overlapping each other on mobile devicesBootstrap 列在移动设备上相互重叠
【发布时间】：2020-07-10 21:34:08
【问题描述】：

我试图在 Bootstrap 中有 2 列。第一个（导航栏）将是全宽（col-12），另一列（内容）将是页面的 1/3 和 2/3，因此 col-4 和 col-8。但是，在移动设备上，如图所示，第二行与第一行重叠（我在行上添加了红色和黑色边框以查看问题）：

现在，当我在第一行做一个底部边距时，我看到以下内容：

到目前为止，导航栏与行重叠

导航栏的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
    </div>
</nav>

以及正文的代码：

<div class="container shadow">
    <div class="row">
        <div class="col-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
         {....}
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-6 card border-0">
            <div class="leftColumn">
               {...}
            </div>
        </div>
        <div class="col-lg-8 col-md-6 card border-0">
            <div class="rightColumn">
                {...}
            </div>
        </div>
    </div>
</div>

我做错了什么？

编辑：

来自引导文档：

'固定导航栏使用位置：固定，这意味着它们是从 DOM 的正常流程中拉出来的，可能需要自定义 CSS（例如，padding-top on the ）以防止与其他元素重叠。'

codepen 的链接：

https://codepen.io/witteWas/pen/xxGMYYa

编辑：

通过将第二行嵌套在第一行中解决了问题。

<body>
  <div class="container">
    <div class="row">
      <div class="card has-shade">
        <div class="col-12">
          <nav class="navbar navbar-expand-sm navbar-light">
          {...}
         </nav>
          <div class="row">
            <div class="col-lg-4 col-sm-12 card border-0">
              {...}
            </div>
            <div class="col-lg-8 col-sm-12 card border-0">
              {...}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

请分享在线代码编辑器的链接。
codepen.io/witteWas/pen/xxGMYYa

标签： html css twitter-bootstrap bootstrap-4 grid

【解决方案1】：

首先，您的列类很混乱。

.col-md- 类的意思是……

（中型设备 - 屏幕宽度等于或大于 768 像素）

.col-lg- 类的意思是……

（大型设备 - 屏幕宽度等于或大于 992 像素）

事实上，如果您的其中一台设备上已经安装了 col-md，则包括所有 992 像素或更大的设备。同时使用这两个类可能会产生一些冲突。

这似乎也在正文部分重复。使用这两个类之一，如果您需要将自定义 css 应用于某些分辨率，请在您的 styles.css 文件中使用媒体查询。

【讨论】：

我想要基于正在使用的设备的不同列布局。所以大型设备上为 4 / 8，中型设备上为 6 / 6。看到引导文档这应该是可能的： <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div>