我有以下代码，基本上是一组 Bootstrap 标注标签。 我正在尝试对齐几行 12 列。如果我使用 row，我会在 callout 标签内看到不需要的滚动条。
这是代码，也可以在this fiddle中查到
<body style="width:100%;">
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<img src="http://via.placeholder.com/100x20" style="max-height: 48px; max-width: 60px;"/>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<img src="http://via.placeholder.com/100x60" style="max-height: 48px; max-width: 60px;"/>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</body>
如图所示，第一个标注的图像高度不足，无法使 col-xs 对齐。标签，但第二个有足够的高度，所以它没有对齐另一个 <div class="col-xs"> .
应该如何解决这个问题？
最佳答案
据我了解，您只需要将一个 div 添加到 img 标签并将 css 赋予该 div:
<body style="width:100%;">
<div class="row">
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<div class="demo-img">
<img src="http://via.placeholder.com/100x60" />
</div>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<div class="demo-img">
<img src="http://via.placeholder.com/100x60" />
</div>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
</body>
并将以下 css 添加到您的 .css 文件中:
.demo-img {
height: 48px;
width: 60px;
overflow: hidden;
}
.demo-img img {
height: 100%;
width: 100%;
}
关于html - Bootstrap : How to properly align several rows of col-xs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48394531/