Boostrap 4:使文本区域与列高度匹配
Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网页和Web应用程序的工具和组件。Bootstrap 4是Bootstrap框架的最新版本，它引入了许多新的特性和改进。
在Bootstrap 4中，要使文本区域与列高度匹配，可以使用内置的CSS类和布局工具。以下是一种常见的方法：
- 使用容器（Container）和行（Row）来创建网格系统。容器是一个用于包装内容的容器，行是用于创建列的水平容器。
- 在行中创建列（Column），并使用列的CSS类来定义列的宽度。例如，col-md-6表示创建一个占据一半宽度的列。
- 在列中放置文本区域，并使用内置的CSS类来调整文本区域的样式。例如，使用p-3类来添加内边距，使用bg-light类来设置背景颜色。
- 如果要使文本区域与列高度匹配，可以使用flexbox布局。在列的父元素上添加d-flex类，然后在文本区域的父元素上添加flex-grow-1类。这将使文本区域自动填充剩余空间。
以下是一个示例代码：
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="d-flex flex-column h-100">
<div class="bg-light p-3 flex-grow-1">
<p>这是一个文本区域。</p>
</div>
</div>
</div>
</div>
</div>在这个示例中，容器包含一个行，行包含一个占据一半宽度的列。列中的文本区域使用flexbox布局，使其与列高度匹配。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
腾讯云云服务器（CVM）是一种弹性计算服务，提供可扩展的云服务器实例，可满足不同规模和需求的应用程序。您可以根据实际需求选择不同配置的云服务器，以满足您的性能和成本要求。
腾讯云对象存储（COS）是一种高可用、高可靠、低成本的云存储服务，适用于存储和处理各种类型的数据。您可以将静态文件（如图片、视频、文档等）存储在COS中，并通过腾讯云CDN加速访问。
更多关于腾讯云云服务器和对象存储的信息，请访问以下链接：
腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云对象存储：https://cloud.tencent.com/product/cos
相关·内容
4回答
利用腾讯云GPU构建深度学习网络？
对象存储、深度学习
如题，本人（学生）想用腾讯云构建一个实验性的深度学习网络，具体要用到腾讯云的哪些服务呢？（GPU，COS），另外还需考虑较低的成本。。。
浏览 1121提问于2017-12-13
1回答
拉伸<canvas>以填充不带任何滚动条的flex项
html、css、twitter-bootstrap、flexbox、bootstrap-5
我正在使用引导5，并试图设置一个嵌套的flex布局来填充窗口，其中一个flex项被一个“拉伸”的<canvas>填充(因此任何地方都没有滚动条)。
由于某些原因，使用w-100和h-100实用工具创建画布(相当于将CSS宽度和高度设置为100%)将在页面上创建一个垂直滚动条。我在网络上看到了许多类似的问题，但它们几乎都是针对flex-direction: row的，似乎不适用于我的column场景。我不知道这是否是Bootstrap中的一个bug，或者我只是误解了嵌套的flex容器和/或画布。
下面是一个复制问题的代码：
下面是HTML主体：
<body class="
浏览 6提问于2021-08-19得票数 0
回答已采纳
1回答
jQuery UI可排序:防止在全高列之间使用连接列表进行水平滚动
css、bootstrap-4、jquery-ui-sortable
我正在使用Bootstrap v4中的Flexbox构建一个包含两个全高列的web应用程序。这两列都包含一个连接的可排序列表，可以使用jQuery UI Sortable对该列表进行排序。
HTML：
<div class="container-fluid h-100 d-flex flex-column p-0">
<div class="row flex-grow-1 p-3">
<div class="row flex-grow-1 p-3">
<div class="col-4 m
浏览 40提问于2019-04-15得票数 1
2回答
如何在响应过程中使用引导来更改宽度？
html、bootstrap-4
我试图在响应过程中更改div元素的宽度。因此，当我将屏幕宽度缩小到600 50左右时，div元素应该将其宽度提高到50%。
现在我注意到w-*类没有断点，我想知道有什么方法可以做到吗？？
此外，我被允许只使用引导，尽量避免添加我自己的CSS。
有人能帮忙吗？
下面是代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta
浏览 0提问于2018-09-14得票数 1
回答已采纳
2回答
在.d-flex容器引导程序4中使用. in *
twitter-bootstrap、css、flexbox、bootstrap-4
建议将.col-*作为.d-flex容器中的子容器使用(允许)吗?或者不是使用.d-flex的方式，而是使用.row。
在中，我找不到在.d-flex容器中使用.col-*的任何示例。他们只使用这样的布局
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex
浏览 0提问于2018-04-19得票数 9
回答已采纳
2回答
了解按钮高度是如何设置的
html、css、bootstrap-4
我的代码(full version)： <div class="modal-body">
<div class="container">
<div class="row">
<div class="col-8 p-0">
<form class="form-group">
<form>
<input type="text" class
浏览 6提问于2019-06-02得票数 1
2回答
溢出，导致整个页面滚动。
html、css、bootstrap-4、flexbox、overflow
我正在尝试创建一个不滚动的页面。页面上的某些子元素可以滚动，但我试图阻止整个页面滚动。我有一个非常嵌套的子元素，当溢出时，它会接收一个滚动条，但也会导致主文档增长和接收一个滚动条。
这是问题的核心，但还有几个嵌套级别可能是一个因素。
<div class="h-100 d-flex flex-column">
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
</di
浏览 1提问于2019-04-25得票数 1
回答已采纳
2回答
引导4导航栏内容垂直对齐在IE 11中被忽略
internet-explorer、bootstrap-4、navbar
我把我的肚脐放在背景图像(使用类bg-灯)与肚脐位于图像底部。但在IE11中，导航条出现在图像的顶部。我知道IE 11有问题的引导带对齐，这可能是其中之一，但不知道是否有任何解决办法，以使肚脐保持在IE的底部图像？下面是已剥离的代码：
<style>
.bg-light{
background-image:url("https://www.restinbeing.com/images/header3.jpg");
background-repeat: no-repeat;
min-height: 140px;
margin:0px a
浏览 4提问于2021-07-17得票数 0
回答已采纳
4回答
数据比较多，有什么好点的存储方案吗？
对象存储、文件存储
贵州地区，给公司做类似企业网盘的东西，存储数据大概在6~7T左右，有没有好点的存储方案呢？我看腾讯云这边有COS、CFS等，我是从网站直接读取数据，推荐那个？有没有什么试用渠道呢？
浏览 963提问于2017-09-15
7回答
怎么导出腾讯云服务器镜像并下载到本地？
导出的镜像，我能在本地环境正常使用么，我想把这个镜像再安装到我本地的电脑上，请问这个操作是都能成功
浏览 14459提问于2020-08-03
1回答
不使用Bootstrap 4 flex进行包装
css、bootstrap-4、flexbox
当我使用flex-base: 100%时，我希望有两列和几个块，它们包装到第二列中。下面是我想要的一个例子： .container1 {
height: 50vh;
width: 50vw;
}
.item1 {
height: 10%;
width: 70%;
}
.item2 {
height: 10%;
width: 28%;
}
.item3 {
width: 2%;
}
.break-column {
flex-basis: 100%;
}
.item4 {
height: 10%;
width: 70%;
} <scri
浏览 4提问于2021-02-01得票数 0
1回答
为什么引导程序在打印视图中断开到新行？
css、bootstrap-4
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="container-f
浏览 3提问于2021-12-01得票数 0
1回答
响应式网格项目中的问题
html、css、bootstrap-4、flexbox
我在桌面的响应图像中有一个问题，结果与预期一致，但在任何其他设备中，最后两个网格项目的高度与其他网格项目不同，这与预期不同 📷 它应该与从https://drive.google.com/uc?export=download&id=1gJ-g7EWreZu38DlaZltLDylPIBDHLSxX中提取的图像的其余网格项具有相同的高度 最后两个网格项目，我正在讨论天幕和海滩大门，它应该与市场和纪念碑具有相同的高度。 .adventure-card {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required
浏览 14提问于2020-12-24得票数 0
2回答
如何使用引导灵活的方式使内部盒的高度达到其父框的全部高度？
html、css、flexbox、bootstrap-4
我知道解决方案将父元素设置为相对元素，子元素设置为绝对值。有人能用一种更灵活的方式吗？(不要使用绝对)
请不要轻易地用把问题标记为重复。
因为我尝试过@David在那个线程中提到的flex方式，所以我似乎只能让它在挠性方向上工作:行布局，而它不能在我的小提琴(flex方向:列)布局中工作。
HTML：
<div class="d-flex flex-column h-100">
<div class="p-2 d1">Flex item 1</div>
<div class="p-2 d6 flex-gr
浏览 0提问于2018-12-07得票数 1
回答已采纳
1回答
css -如何使div具有特定的纵横比
javascript、html、css、bootstrap-4
这是我当前的布局。
这就是我想做的：
1.外容器的宽高比应在纵横比以上
2.内容区域应具有相同的纵横比
App.js (我使用的是Bootstrap，所以现在不涉及css文件)
<div class="border p-3 m-2 bg-info" style={{ width: "400px" }}>
<div class="p-2 bg-light">
<div class="border p-1 border-warning" st
浏览 5提问于2021-09-20得票数 2
2回答
如何在没有左右间隔的列之间创建空白？
css、twitter-bootstrap、bootstrap-4
我想在列之间创建指定数量的空格。所以我基于创建了这个。但是这有一个向右的溢出。我想消除这个溢出，因为由于其他组件的干扰，我不能指定overflow: hidden：
.row {
margin: 0 -25px;
}
.col {
padding: 0 25px;
min-width: 0;
}
div {
overflow-wrap: break-word;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel=
浏览 0提问于2019-12-28得票数 0
2回答
如何使用引导带4创建独立的可滚动列？
twitter-bootstrap、bootstrap-4、flexbox、multiple-columns
我试图在顶部得到一些固定高度的内容，下面有2列可以单独滚动。我想让他们占据任何屏幕高度，所以我不能使用固定的height或max-height。
我使用的是Bootstra4.5，所以我的标记看起来如下：
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>h1</h1>
浏览 2提问于2020-12-05得票数 0
回答已采纳
2回答
Bootstrap镜像未根据父级调整高度
css、html、twitter-bootstrap、bootstrap-4
我有一些带有图像的按钮。按钮内部的图像太大。当按钮的高度改变或者文本大小改变时，我想让图像通过button元素来调整大小。我使用的是Bootstrap-4类("img-fluid")，但它不能正常工作，因为图像高度没有变化。
我的HTML代码：
<div class="order-type-buttons col-12 d-flex" aria-label="First group">
<button type="button" class="btn order-type-btn-blue col-4 d
浏览 6提问于2018-12-07得票数 0
1回答
Bootstrap 4:每行填充相同的高度
css、bootstrap-4
我正在做一个预加载器，并且我正在与行作斗争。我想让我的灰色矩形填充3行33%的高度。
然后我需要：
在行1，svg 在行2，装载器在行3，一些文本
这是我想要的：
下面是我的代码：
#loader-modal {
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(0,0,0, 0.9);
z-index: 100000;
}
.rectangle-chargement {
width: 25%;
height: 50%;
top
浏览 30提问于2019-05-28得票数 0
回答已采纳
1回答
Bootstrap 4-将元素与其容器的底部对齐
twitter-bootstrap、alignment
我试图找到这个问题的答案，但没有运气，我自己也尝试了一些事情。我在一行中有两列，我希望将第二列的底部div (三个按钮组)垂直对齐到行容器的底部，即#control-panel。
目前第二列是居中对齐(垂直)，这就是为什么这三个按钮没有连接到容器的底部。
此外，我附加了一个图像，使其更容易看到
<div id="control-panel">
<div class="container">
<div class="row">
<div class="c
浏览 22提问于2018-09-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
