Question

首次使用Bootstrap，直接从此处获取模板：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_webpage&stacked=h

做了一些改变：额外的CSS添加：

  .affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
  }

  .affix + .container-fluid {
    padding-top: 52px;
  }

  .sidebar {
    height: 100%;
  }

  @media (max-width: 768px) {

    [class*="col-"] {
      margin-bottom: 25px;
    }

  }

 .row.content {height: 1080px;}

我在<div col-sm-8>中添加了多个内容，我在列中添加了许多列和列，这样每次最多可添加12个，但现在发生的是我最顶层的列，即左侧边栏和内容堆叠即使在大屏幕上。即首先只有左侧栏可见，然后向下滚动以查看主要内容，此处根本看不到右侧栏。

以下是整个代码： https://www.w3schools.com/code/tryit.asp?filename=FM4NCPJ27YEY

Answer 1

您的问题是语法错误，

有一个额外的div结束标记位于<div class="col-sm-8 text-left">之前，其作用类似于<div class="row content">的结束标记，这是完全错误的，因为所有col都应该在同一个row容器内，删除它将解决问题。

检查更新的代码段。

https://www.w3schools.com/code/tryit.asp?filename=FM4NZ59ZLBEI

即使在较大的屏幕上，引导列也会堆叠

1 个答案: