Класс Bootstrap `col .col-md-4` не работает при использовании` img-liquid`

Question

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

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

Я пытался удалитьimg-fluid класс и добавленная ширина: 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 class:

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

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

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

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

Answer 1

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

Тогда все должно работать как ожидалось.Это не о img-жидкости.

Answer 2

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

Answer 3

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

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