html - 即使在更大的屏幕上，bootstrap 列也会堆叠起来

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