大家好,所以我将网站作为一个项目,在其中一个部分中,我将列表组放在项目名称的右边,右边是所述项目的图像。我已经使用Pingendo做了它,但文本没有正确对齐图像。
这是我的代码:
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h4 class="mb-1 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="150" height="150" > </a>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</a>
</div>
这就是它在网站上的样子:
基本上我要做的是将文字和图片对齐在同一条线上,这样我就不会看到顶部的文字和下面的图片。
提前致谢。
答案 0 :(得分:4)
删除'.flex-column'类表单.list-group-item
并添加'.d-flex'。
还会删除代码中的重复结束
a
代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-start">
<div class="w-100">
<h4 class="mb-1 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</div>
如果您希望将文字和图片放入中心
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="w-100">
<h4 class="mb-0 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="w-100">
<h5 class="mb-0 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="w-100">
<h5 class="mb-0 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</div>