bootstrap 3 отзывчивости для хз

Question

Цель: при просмотре по телефону в галерее изображений отображается только один столбец изображений

Что происходит: отлично работает на lg, md, sm, но затем ниже 767 пикселей сохраняет настройку «см». Я знаю, что это было решено в bootstrap 4, но я хочу попытаться понять, почему он не работает с версией 3, прежде чем я go до конца и начать делать обновления с использованием v4.

Это просто фрагмент здесь у меня много изображений, но это внутри div с классом строки и внутри класса контейнера.

Я пробовал включить col-xs-12; Col-XS; не включая его, а также установив Css на 100% ширину, flex, et c .. (вещи, которые я нашел в других публикациях - я пытался, но они не работали для моего случая)

<div class="col-sm-6 col-md-4 col-lg-3">
  <div class="thumbnail">
    <img class="img-responsive" src="https://lh3.googleusercontent.com/YwlgEiwXej42zA7V_BuCh_g6eozBIe6LZk4srhomMKIkbMyYngyBZ-08wm9SV-vL_piHBvWsXBLOppMG5HW3K8vJk_1OK2TpkeP0OmN0PSMPBLj5fPi_wCxHqTagaE3u-XmBcMHutSkEJGhB00IQCQogAEtAPHFhJYc0Jv_1IQc8-waSc3mUA_mBdghlnoLtRgrlMDnew7JaXwgMaG-n1BaBfwPny7sHwNqaD7rXtbV8KSY7vxS9QSWmHTcp-qHEYd9J-kKaoQsVHhu6E80vMMvhNEIYb0B6oQYwIHpnBAJNYFYeQ1edv0JSL6KGI1EXhRTfhCt-4YqUAjt8DVUF2anFJ2nQEZw9fOzb7q4lHxuPl8eh4yMbVcwAnQ1a09OwCI8FB2mTvqOZUr7Jv0xhDRkz88OyVFRrwW3Q1Zh495OCWKlLHD12hg5In-XsqKOjOu8IAAP9WSQpmbNi31TGo-dmulsnOodkiTB8ChxMiKc_K5uTc8dSMWpLklqkcdhk8uaTqkFP6L3jC2bsSXZSOcIUx8CIm-SE8r8FXQoaJKpRbQ-pekPa2PhsxkL9rn9OsBi4QmBmyo5VwpTLT9HgaNabmoTkHfZtWCxpOB1bUxq3rmeIndW7NbcoKHowszRqtYY6R4zhviJZhM0vp3PJERiUv-EwQZIk_zPBjVdEKyZWxQEh5s-yQ75IU_YfxBxhfh7FPyiRTQty2spcUf0HrxWE96-BbqEX9EEQJAWIi5EnProNLd8VDTwS=w743-h784-no"
        alt="momo">
  </div>
</div>

Answer 1

Col-xs in Bootstrap 3 применяется для очень маленьких экранов, и это прекрасно работает, так как логика c идет. Вам нужно найти некоторые из ваших других правил css, которые отменяют это и нарушают правила Bootstrap. Проблема не должна быть связана с самой Bootstrap.

Более того, почему бы не выполнить обновление до Bootstrap 4 и постоянно обновляться. Полагаю, что обновление с помощью плагинов и скриптов - обязательная практика. В Bootstrap 4, col без -sm, -md, -lg применяется для очень маленьких экранов. col-xs устарела в пользу col-. На самом деле col-12 равен col-xs-12 из предыдущих версий Bootstrap. если вы хотите проверить свою сетку Bootstrap, вы можете использовать следующий код:

<div class="alert alert-info">
<div class="d-none d-xl-block font-weight-bold">X-LARGE (XL)</div>
<div class="d-none d-lg-block d-xl-none font-weight-bold">LARGE (LG)</div>
<div class="d-none d-md-block d-lg-none font-weight-bold">MEDIUM (M)</div>
<div class="d-none d-sm-block d-md-none font-weight-bold">SMALL (SM)</div>
<div class="d-block d-sm-none alert font-weight-bold">X-SMALL (Defaut)</div></div>