Почему следующие столбцы Bootstrap не работают при использовании img внутри столбца? - PullRequest
Новая
       15

Почему следующие столбцы Bootstrap не работают при использовании img внутри столбца?

0 голосов
/ 28 августа 2018

Следующая разметка не отображается правильно при использовании тега 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>

Будет отлично работать, если я удалю изображение и заменю его текстом.

1 Ответ

0 голосов
/ 28 августа 2018

Вы не правильно вкладываете свои столбцы. В каждой строке может быть только 12 столбцов, и вы пытаетесь уместить 4 строки в один.

Вы должны взглянуть на документацию чуть ближе.

Если в одной строке размещено более 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>
...