我正在使用 Vue.js 和 Bootstrap 开发应用程序。我希望开发一个如下所示的文件夹:
但是,我无法对齐内容以确保它看起来像上图。
图片目前是这样的:
代码如下:
<div class="col-xl-3 col-md-6">
<stats-card>
<div slot="header" class="folderRectangle">
<div class="row">
<div class="col-3">
<div class="clearfix">
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-9">
<div class="clearfix" style="position: relative">
<div>
<p style="text-align: left">Folder Name</p>
</div>
<div>
<p style="text-align:left">20 files</p>
</div>
</div>
</div>
</div>
</div>
</stats-card>
</div>
我做错了什么?如何确保文件夹图标与顶部对齐且文本 float 到中心?
最佳答案
您可以使用 media object
而不是使用 .row
和 .col-*
已在 Bootstrap 中生成此布局。
/* demo only */
.media {
border: 1px solid #ddd;
padding: 1.5rem;
margin: 1rem;
}
img {
max-width: 25px;
}
.media-body {
font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="media">
<img class="mr-3" src="https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt="Generic placeholder image">
<div class="media-body">
<h6 class="mt-0 mb-1">Folder name</h6>
<div>20 files</div>
</div>
</div>
关于html - 无法对齐div内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54623497/