【发布时间】：2019-08-08 20:30:51
【问题描述】：
我试图为我的大学项目创建一些 UI，但它不能正常工作，任何人都知道如何正确地做到这一点或任何想法 (look 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>【问题讨论】：
-
提出广泛的问题，但我认为这是一个好的开始。 bootply.com/Gv859jDU6Q
-
你好@isherwood，我尝试为我的项目做一些UI结构，我想知道如何像这样i.stack.imgur.com/bFm9Y.png，
-
真的没有必要@提及我，任何新信息都应该放在你的问题正文中，而不是在评论中。谢谢。
标签： css twitter-bootstrap user-interface bootstrap-4