Twitter bootstrap 4两列全高，不带滚动条

在使用Twitter Bootstrap 4创建两列布局时，确保两列都占据整个视口高度（全高）且不出现滚动条，可以通过以下步骤实现：

基础概念

Bootstrap 4: 是一个流行的前端框架，用于快速开发响应式网页设计。
网格系统: Bootstrap使用12列网格系统来布局页面元素。
Flexbox: Bootstrap 4基于Flexbox布局模型，使得创建复杂的布局变得更加容易。

类型与应用场景

两列布局: 常用于将页面分为主要内容区域和侧边栏。
全高布局: 确保内容占据整个视口高度，适用于需要最大化屏幕空间的应用场景。

实现步骤

以下是一个示例代码，展示如何使用Bootstrap 4创建两列全高布局且不带滚动条：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Columns Full Height</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .full-height {
      height: 100vh;
    }
    .no-scrollbar {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="d-flex flex-column full-height no-scrollbar">
    <header class="bg-primary text-white p-3">
      Header
    </header>
    <div class="flex-grow-1 d-flex no-scrollbar">
      <div class="bg-info text-white col-md-8 p-3">
        Main Content
      </div>
      <div class="bg-warning text-white col-md-4 p-3">
        Sidebar
      </div>
    </div>
    <footer class="bg-secondary text-white p-3">
      Footer
    </footer>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释

HTML结构:
- 使用d-flex和flex-column类将整个页面设置为一个垂直的Flexbox容器。
- full-height类确保整个页面高度为视口高度（100vh）。
- no-scrollbar类通过设置overflow: hidden来隐藏滚动条。

CSS样式:
- html, body设置为100%高度，并移除默认的margin和padding。
- .full-height确保容器占据整个视口高度。
- .no-scrollbar隐藏滚动条。
Bootstrap网格系统:
- 使用col-md-8和col-md-4类将两列分别设置为8和4列宽，适应中等及以上屏幕尺寸。

遇到问题的原因及解决方法

滚动条出现: 可能是由于内容溢出或未正确设置高度。确保所有父容器的高度都正确设置，并使用overflow: hidden隐藏滚动条。
高度不匹配: 确保所有相关元素的高度都设置为100%或使用Flexbox布局来自动调整高度。

通过上述方法，可以创建一个两列全高且无滚动条的布局，适用于各种响应式设计需求。

页面内容是否对你有帮助？

有帮助

没帮助

Twitter bootstrap -修复了可滚动侧边栏的布局

、

我正在尝试使用twitter bootstrap实现一个简单的标题+2列布局。这是我正在尝试构建的布局的图片

浏览 2提问于2012-04-04得票数 28

1回答

Twitter bootstrap 4两列全高，不带滚动条

、、、

我正在尝试用bootstrap 4做两列全高布局。

浏览 20提问于2020-09-27得票数 1

回答已采纳

2回答

Twitter Bootstrap accordion全高

、、、

我有一个Bootstrap页面，上面有一个可折叠的手风琴。我希望手风琴占据整个页面的高度(减去顶部的导航栏)。有没有人有关于如何最好地实现这一点的建议？

浏览 0提问于2012-10-24得票数 7

1回答

全高- Web Responsive - Twitter Bootstrap

、、、

有人知道如何在Twitter Bootstrap中将div设置为全高(屏幕高度的100%)，在所有分辨率下？我真的很感谢任何人的帮助。

浏览 4提问于2013-03-06得票数 4

回答已采纳

1回答

Bootstrap +列+全高+偏斜

、

我不习惯在预科模板之外开发太多的html，现在我有一个很棒的机会去冒险。我正经历着我生命中最艰难的日子，就为了把密码放进去。一些好的可以给出一个起点吗？有谁能帮我一下吗？

浏览 1提问于2018-09-04得票数 1

回答已采纳

6回答

Twitter Bootstrap:让旋转木马图像全宽全高

、

这似乎是一个微不足道的问题，但在他们的示例()中摆弄了几个小时的Twitter Bootstrap carousel之后，我求助于SO来寻求一些帮助。

浏览 1提问于2013-04-15得票数 19

3回答

Twitter Bootstrap 3响应式全高网格

、、、、

我想要一个响应式的全高网格，使用bootstrap 3。我的问题是网格，我不知道如何设置100%的高度到容器和内部div。宽度是完美的，但高度:S。

浏览 1提问于2014-08-09得票数 4

回答已采纳

1回答

Bootstrap 4两列全高

、、、

我正在绞尽脑汁研究如何在bootstrap 4中完成下面的布局。我需要做的主要事情是col1、col2和col3需要到它们各自行的底部。它们需要是嵌套列，但是bootstrap 4似乎没有填满父行高度。请帮帮忙。以为例。我要用红色来遮盖黄色。提前谢谢。

浏览 10提问于2018-02-01得票数 3

回答已采纳

1回答

Bootstrap生成全宽全高列

、、

然而，列却不是这样--巨大的空白边距仍然在屏幕的左右边缘。此外，我还想让列占据页面末尾的所有空间，并且不确定是否需要使用container来完成此操作。

浏览 4提问于2017-09-25得票数 0

1回答

加载Fancybox时从父窗口删除滚动条

、、、

我使用的是一个自定义版本的Twitter引导2.x (流体响应)，顶部和底部全宽度固定导航条和Fancybox 2.1.4bootstrap.min.cssmodernizr-2.6.2-respond-1.1.0.min.js当您单击链接时，fancbox框出现在屏幕上

浏览 0提问于2013-07-31得票数 1

回答已采纳

1回答

如何在twitter-bootstrap fluid布局中创建多个可滚动部分

、、、

我在我的网站上使用Twitter的Bootstrap fluid布局。我有一个折叠/展开的手风琴，在其中一个部分的内部，我有三个我想要单独滚动的列。这些列当前展开到其内容的完整高度，但我希望它们展开到视区(可视页面)，并显示滚动条以到达其余部分(当它还不是全部可见时)。如果将列设置为：overflow: auto; height: 500px;，则会显示滚动条 我不想设置高度；但是，我希望将其设置为适合视口的任何值。我不确定如何在Bootstrap中处理这个问

浏览 2提问于2012-04-07得票数 4

19回答

自举3双列全高

、、

我试图用Twitter引导3制作一个两列的全高度布局，似乎Twitter Bootstrap 3不支持完全高度布局。<div class="col-md-3"></div> </div>有没有办法用默认的Twitter

浏览 11提问于2013-09-30得票数 254

回答已采纳

2回答

在twitter引导媒体网格中以不同方式堆叠元素

、

在twitter bootstrap中，当使用媒体网格时，如果我在一行中有4个跨度，然后缩小浏览器，这些跨度会变小，最终堆叠成4个全宽的行。这是好的，但在这之间，我想在一个断点，而不是安排他们作为2列，在最终安排为一个主题。换句话说，默认情况下，它似乎从4列直接转到1列，但我希望它转到2列之间。我如何才能做到这一点。

浏览 2提问于2013-01-27得票数 1

回答已采纳

1回答

如何仅在桌面上偏移列

我对bootstrap 3网格系统并不陌生，但之前我只在移动设备上使用过堆叠列。 </div>这在桌面和移动设备上看起来都很好，但后来我意识到我在移动设备上也有滚动条。它可能围绕在html (这里没有显示)周围吗？或者它与这段代码有关？

浏览 1提问于2017-04-14得票数 0

2回答

Bootstrap中带文本列的全高图像

、

我想要一些非常简单的东西，但是我不能用Bootstrap (4.3.1)来实现。它看起来完全是我想要的，但是我知道css是不正确的。我想要一个图像，涵盖了整个col 4列的高度和宽度和固定的位置，以便它停留在滚动col 8内容时静止。在移动设备上，我希望图像是col-12和col-xs-8列(所以基本上是堆叠的)。正如您在我的代码片段中看到的，图像的硬宽度为40%，如果我将其设置为100%，它将忽略Bootstrap列并填满整个屏幕。 width: 100%;

浏览 24提问于2021-05-04得票数 0

回答已采纳

1回答