css - 运行 React 和 Bootstrap 的 CSS 使卡片具有相同的高度
问题描述
我在 React 中使用 Bootstrap 4。目前,第 1 项的卡片比第 2 项短,但我希望两张卡片的高度相同。
我预计将来会在底部添加更多卡片。
我的 CSS 文件:
.CountryDetail {
width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: 15%;
margin-right: 15%;
}
.cards {
background: #fcfcfc;
margin: 20px 40px;
transition: 0.4s all;
width: 800px;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.icon-size {
font-size: 50px;
}
.shadow-1 {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
box-sizing: border-box;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
}
.shadow-1:hover {
z-index: 1;
box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
transition: all 0.5s ease;
}
.vertical-center {
justify-content: center;
}
.show-hover {
opacity: 0;
transform: translateX(-20px);
transition: 1s all;
}
.cards:hover .show-hover {
opacity: 1;
transform: translateX(0px);
color: blue;
}
.vertical-align {
display: flex;
align-items: center;
}
我的 JavaScript 文件:
<div className="CountryDetail">
<div className="cards shadow-1 container">
<div className="row vertical-align">
<div className="col-2 text-center">
<FontAwesomeIcon className="icon-hover icon-size" icon={faPlane} color="#A9A9A9" />
</div>
<div className="col-8">
<h3>Item 1</h3>
</div>
<div className="col-2 text-center">
<FontAwesomeIcon className="show-hover icon-size" icon={faArrowRight} color="#A9A9A9" />
</div>
</div>
</div>
<div className="cards shadow-1 container">
<div className="row vertical-align">
<div className="col-2 text-center">
<FontAwesomeIcon className="icon-hover icon-size" icon={faHeart} color="#A9A9A9" />
</div>
<div className="col-8">
<h3>Item 2</h3>
<span>Under Construction...</span>
<h2>Testing</h2>
</div>
<div className="col-2 text-center">
<FontAwesomeIcon className="show-hover icon-size" icon={faArrowRight} color="#A9A9A9" />
</div>
</div>
</div>
</div>
我试图在 CSS 中为cards
类添加 line-height 或 height ,但它会弄乱卡片内内容的高度。
如果我通过添加最小高度来修改我的“卡片”类:
.cards {
min-height: 200px;
background: #fcfcfc;
margin: 20px 40px;
transition: 0.4s all;
width: 800px;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
解决方案
根据您对相同高度和居中内容的需要,将您的 CSS 更新为:
.cards {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 200px;
background: #fcfcfc;
margin: 20px 40px;
transition: 0.4s all;
width: 800px;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
如果您将卡片设置为display flex
,因为您只有一个直接子 ( row
),您可以将其垂直居中。
推荐阅读
- node.js - 从 promise 返回值时出现 TS 2739 错误。输入“承诺”
' 缺少类型中的以下属性 - javascript - 为什么 JSON.parse() 突然开始给出不同的输出?
- vb.net - 如果用户输入了不在组合框列表中的其他值,如何弹出消息?
- wpf - 如何在 WPF 中实现与 Silverlight 相同的打印功能?
- flutter - 颤动中列表末尾的ListView错误
- vue.js - Vue.js、Vuex;当 Vuex 存储中的数据发生突变时,组件视图没有反应(神秘的例外)
- javascript - 从状态中另一个项目的内容设置状态
- perl - Perl 模块 WWW::Mechanize::PhantomJS 错误使用示例 prgram 作为测试
- go - protoc错误validator.proto:找不到文件
- python - Tkinter 中的小部件类或方法是什么?