我希望使用Bootstrap 4将标签，文本输入和x符号彼此对齐。
我设法使标签和文本输入对齐，但似乎不能用x符号这样做。
jsfiddle:https://jsfiddle.net/jptyuv5n/
如何将x符号对齐到输入字段旁边？ 我错过了什么？
null
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
}
.collection .form input {
display: inline-block;
width: 100%;
}<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text1">
<span>X</span>
</div>
</div>
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>null
编辑:我刚刚在你的问题中看到你提到了Bootstrap 4。 使用bootstrap样式和0个css行也可以达到同样的效果。
以下代码段中使用的类记录在这里:https://getbootstrap.com/docs/4.0/components/forms/#overview
null
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 collection">
<div class="row">
<div class="col-3">
<img src="https://via.placeholder.com/150/771796">
</div>
<div class="col-9">
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label>text</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">X</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>