我想让列表项的布局如下所示,并在其中带有图像的圆圈中添加一个标题,在该圆圈的右侧显示标题,帖子的日期以及帖子的类别。在列表项的右侧应显示按钮。
我有这段代码可以使用flexbox实现这种布局:http://jsfiddle.net/muLh5v4n/2/。但是它不能正常工作,标题,发布日期和类别不在图像的右侧,而是在图像下方。
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group list">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group list_search">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control shadow-none search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<div class="post-info">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
</li>
<li class="list-group-item">item2</li>
<li class="list-group-item">item3</li>
<li class="list-group-item">...</li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分:3)
这是另一个方法。
ul {
list-style-type: none;
width: 500px;
border: 1px solid gray;
margin: 0;
padding: 0;
}
.picture_round{
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 10px;
margin-left: 20px;
object-fit: cover;
object-position: center;
display: block;
}
.dsp_flex {
display: flex;
justify-content: center;
align-items: center;
}
.middle_section{
flex: 1;
text-align: left;
}
ul li button{
margin-right: 20px;
}
ul li{
padding: 10px 0px;
border-bottom: 1px solid blue;
}
.title {
text-transform: uppercase;
font-weight: bolder;
}
.category{
border: 1px solid gray;
border-radius: 10px;
display: inline-block;
padding: 5px 2px;
}
<ul>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">titletitle title</div>
<div class="description">lorem ipsum ipsum lorem ipsum ipsum</div>
<div class="category"> categorycategory </div>
</div>
<button>Button</button>
</div>
</li>
</ul>
答案 1 :(得分:2)
您可以尝试使用此功能;您可以进一步设置元素的样式;但基本上该组件应按预期显示。此外,这仅使用Bootstrap类,自定义css仅用于示例。
.list-item {
max-width: 450px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-item border d-flex align-items-center">
<div><img src="https://via.placeholder.com/100" class="rounded-circle" alt=""></div>
<div class="ml-2">
<h3>Title</h3>
<p>some-text</p>
<span>Span</span>
</div>
<div class="ml-auto mr-2"><button>Button</button></div>
</div>
答案 2 :(得分:1)
Bootstrap 4有一个我们可以使用的名为.flex-row
的类。
让我们仅使用Bootstrap类和flex来做到这一点。
1。。将flex-row
类添加到list-group-item
。
2。。将d-flex
添加到post-info
。
3 。将文本放在d-flex flex-column
div中。
<li class="list-group-item d-flex flex-row align-items-center">
<div class="post-info d-flex">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<div class="d-flex flex-column">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
JSFiddle: http://jsfiddle.net/muLh5v4n/13/
稍后,您可以使用内置于padding类中的Bootstraps来很好地腾出空间。