Блог

Я хочу, чтобы мои divs складывались при изменении размера моего окна — поэтому я использую col .col-md-4 . Внутри моей колонки с этим используемым тегом у меня есть изображение, мой экран складывается, как и ожидалось, при изменении размера моего окна. ОДНАКО, когда я добавляю img-fluid класс в свой тег, col .col-md-4 укладка div при изменении размера окна перестает работать.

Укладка Div РАБОТАЕТ БЕЗ img-fluid класса:

Я попытался удалить img-fluid класс и вместо этого добавил width: 100% для изображения, это также останавливает работу стекирования div.

 <div class="row">
  <div id="browImageContainer" class="col .col-md-4">
    <img class="browImage " src="/images/powderBrowSample.png">
  </div>
  <div class="col .col-md-4 border">
    content
  </div>
</div>
  

Укладка Div НЕ РАБОТАЕТ С img-fluid классом:

 <div id="servicesRectangle"></div>
<div class="row">
  <div id="browImageContainer" class="col .col-md-4">
    <img class="browImage img-fluid" src="/images/powderBrowSample.png">
  </div>
  <div class="col .col-md-4 border">
    content
  </div>
</div>
  

Резюме: я хочу, чтобы мои divs складывались, когда я использую тег img-fluid! Но это не так!

Ожидаемые результаты:

Divs для стекирования при использовании img-fluid класса, чтобы сделать мое изображение отзывчивым.

Вы должны удалить точку перед классом col-md-4. Это недопустимый селектор. Классы всегда должны записываться без точки перед в HTML.

Тогда он должен работать так, как ожидалось. Речь не о img-fluid.

Почему у вас есть dot в ваших именах классов ( col .col-md-4 )?

вы не использовали правильные имена классов: col col-md-4

Я получил то, что мне было нужно, полностью удалив классы col и col-md-4 и заменив его col-sm классом.