为什么在列内使用 img 时跟随 Bootstrap 列会失败？答案

【问题标题】：Why following Bootstrap columns fail when using img inside a column?为什么在列内使用 img 时跟随 Bootstrap 列会失败？
【发布时间】：2019-02-03 04:57:32
【问题描述】：

在网格列中使用 img 标签时，以下标记无法正确呈现：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>

如果我删除图像并用文本替换它，它将完美地工作。

【问题讨论】：

一行应包含 12 列。你的包含 48 个。
这实际上与图像无关。如果您将图像替换为长文本块，您的标记将导致类似的网格中断。

标签： html css twitter-bootstrap-3 grid rendering

【解决方案1】：

您没有正确嵌套列。每行只能有 12 列，而您正试图将 4 行合为一列。

你应该仔细看看the documentation。

如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>

【讨论】：

对于realz？我一直明白，当列数超过 12 并且不需要新的行元素时，它会生成“虚拟行”？
@user1271930 是的，对于 realz
但这如何符合这种情况“每组额外的列将作为一个单元换行”？ Afaik，它声明它应该像我所说的那样按照文档创建“虚拟行”，即“换行”？
当你这样做时，它们会换行，但流程会中断。在这种情况下，它们会尽可能堆叠，从而造成不一致。不要偷懒，把它们包好。 ;)
每个.row 类都有::before 和::after 清除流的伪元素。这就是建立新行的原因。当您将一堆列塞入一行时，它们不会被重置，也不会正确堆叠。