分区内的内联内容
分区内的内联内容
提问于 2019-08-19 19:44:08
我正在转换一个私营部门司的文件，现在我有两张卡，我希望在卡内的内容是像这。有人能帮我吗？
以下是我的当前代码：
.container {
margin-top: 10px;
}
.card {
display: flex;
justify-content: center;
align-items: center
}<div class="container">
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="card height-2">
<i class="material-icons">gavel</i>
<h5>Legislacion</h5>
</div>
</div>
<div class="col-md-6">
<div class="card height-2">
<i class="material-icons">today</i>
<h5>Calendar</h5>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-08-20 04:49:02
正如@Dominik所说，如果您使用的是bootstrap-4，则可以使用引导类
/* ONLY FOR SPACE PURPOSE */
.container {
margin-top: 10px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="container">
<div class="col-lg-12">
<div class="row m-0">
<div class="col">
<div class="card height-2 d-flex flex-row align-items-center p-3" style="border-top:4px solid #515151;">
<i class="material-icons" style="color:#515151;">gavel </i>
<h5 class="pl-5 m-0">Legislacion</h5>
</div>
</div>
<div class="col">
<div class="card height-2 d-flex flex-row align-items-center p-3" style="border-top:4px solid #9b9b60;">
<i class="material-icons" style="color:#9b9b60;">today</i>
<h5 class="pl-5 m-0">Calendar</h5>
</div>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-08-19 19:49:35
由于您使用的是引导程序>= 4，所以可以在row中使用特殊的d-flex justify-content-* align-items-*类。
.container {
margin-top: 10px;
}
.card {
display: flex;
justify-content: center;
align-items: center
}<div class="container">
<div class="col-lg-12">
<div class="row d-flex justify-content-center align-items-center">
<div class="col">
<div class="card height-2">
<i class="material-icons">gavel</i>
<h5>Legislacion</h5>
</div>
</div>
<div class="col">
<div class="card height-2">
<i class="material-icons">today</i>
<h5>Calendar</h5>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Stack Overflow用户
发布于 2019-08-19 21:36:13
我希望你能这样期待：
.container {
margin-top: 10px;
}
.card.height-2 h5{
padding-left:40px;
}
.card {
display: flex;
padding: 20px;
align-items: center;
flex-direction: row !important;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="container">
<div class="col-lg-12">
<div class="row">
<div class="col">
<div class="card height-2" style="border-top:4px solid #515151;">
<i class="material-icons" style="color:#515151;">gavel </i>
<h5>Legislacion</h5>
</div>
</div>
<div class="col">
<div class="card height-2" style="border-top:4px solid #9b9b60;">
<i class="material-icons" style="color:#9b9b60;">today</i>
<h5>Calendar</h5>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57563019
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号