Почему моя bootstrap (3) сетка не отвечает? - PullRequest
1 голос
/ 15 января 2020

Я, вероятно, упускаю что-то глупое здесь, но я не могу понять, почему моя сетка bootstrap не отвечает. Данные об элементах передаются через Node и работают отлично - я получаю сетку миниатюр элементов и их заголовков в строках по 4. Но когда я минимизирую страницу, изображения просто уменьшаются ie, они остаются в строках по 4. С col-sm-6 он обязательно должен разбиваться на строки по 2 элемента и, в конечном итоге, по 1 элементу, поскольку я уменьшаю ширину экрана. Что я делаю неправильно?

    <div class="row text-center" style="display:flex; flex-wrap:wrap">
        <% items.forEach(function(item){ %>
        <div class="col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="<%= item.image %>">
                <div class="caption">
                    <h4><%= item.name %> </h4>
                </div>
            </div>
        </div>
        <% }); %>
    </div>
    </div>

1 Ответ

1 голос
/ 15 января 2020

Так что после попытки это на самом деле хорошо работает:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row text-center" style="display:flex; flex-wrap:wrap">
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...