gpt4 book ai didi

css - Bootstrap 4 卡 UI 无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:15 25 4
gpt4 key购买 nike

我试图为我的大学元素创建一些 UI,但它不能正常工作,任何人都知道如何正确地做或任何想法 (l ook my sample image) 使用 bootstrap 4

我试着设计成这样的结构

这是我的代码

.icn-img {border-radius: 50%; display: block; width: 50px; height: 50px; background: white; border: 1px solid lightgray;}
.st-rgt-img{ display: block; width: 20px; height: 20px; background: lightgray}
<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">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="container">

<div class="card">
<div class="card-body">

<!----------- details------------>
<div class="row">
<div class="col">
<div class="d-flex flex-row">
<div class=""><span class="icn-img"></span></div>
<div class="ml-2">No </div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col">

<div class="api-lst">


<div class="card border-danger border-bottom" >
<div class="card-body ">


<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">location</h6></div>

</div>

</div>

<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">34 salon</h6></div>

</div>
</div>

<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<div class="card-body text-success">
<h5 class="card-title">5</h5>
</div>
<div class="card-footer bg-success border-success">text</div>
</div>
</div>
</div>


</div>

</div>



</div>
<div class="w-100"></div>



</div>
<!----------- details------------>
</div></div>
</div>


</div>

最佳答案

你可以查看链接

https://codepen.io/Xenio/pen/OqwxZa

.icn-img {
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
background: white;
border: 1px solid lightgray;
}

.st-rgt-img {
display: block;
width: 20px;
height: 20px;
background: lightgray
}

.api-lst .card:hover{
transform: scale(1.04);
position:relative;
z-index:1;
transition: 0.5s;
}
<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">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col-sm-6">
<div class="">
<div class="d-flex align-items-center ">
<span class="icn-img"></span>
<div class="ml-2">No </div>
</div>

<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col-sm-6">
<div class="api-lst">
<div class="card data border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>

</div>

</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>

</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>


</div>

</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>

</div>

</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>

</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>


</div>

</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>

</div>

</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>

</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>


</div>

</div>
</div>
<div class="w-100"></div>



</div>
<!----------- details------------>
</div>
</div>
</div>


</div>

关于css - Bootstrap 4 卡 UI 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55221930/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com