Question

在网格列内使用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>

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

Answer 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>

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

1 个答案: