Как я могу добавить настраиваемую маржу в сетку и сохранить ее отзывчивость?

Question

Итак, я пытаюсь добавить 4 «карты» (не bootstrap) к моему HTML, с пробелом между ними, вот изображение того, как должно выглядеть:

Проблема в том, что хорошо 1. Он больше не реагирует после того, как я изменил класс «col» на «col-6», вот как это выглядит прямо сейчас: И вот как это выглядит, когда я уменьшаю размер своего браузера:

Поле между каждой «карточкой» - Горизонтальное - 464px Вертикальное - 100px (от изображение в текст)

Раньше я действительно не работал с сеткой в ​​bootstrap, читал документацию и пробовал кучу разных значений «col», но, похоже, не работает.

Я также попытался просто разместить карточки на экране, затем добавил div вокруг «изображений», говоря «img_div: nth-child (1) ...» и то же самое на 3. Но это тоже не сработало!

Вот мой HTML код:

<div class="container">
  <h1 class="home-title">XelTool</h1>
  <div class="row">
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar Prices</h2>
        <div class="img_div">
          <img
            class="home_img"
            src="/static/img/bazaar prices.png"
            alt="Bazaar Prices"
          />
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar Flipper</h2>
        <div class="img_div">
          <img
            class="home_img"
            src="/static/img/bazaar prices.png"
            alt="Bazaar Flipper"
          />
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar High Demand</h2>
        <div class="img_div">
          <img
            class="home_img"
            src="/static/img/bazaar prices.png"
            alt="Bazaar High Demand"
          />
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar NPC Re-Sell</h2>
        <div class="img_div">
          <img
            class="home_img"
            src="/static/img/bazaar prices.png"
            alt="Bazaar NPC Re-Sell"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Спасибо!

Answer 1

Все идеально, вы просто не придали своему изображению css свойство width 100%

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <h1 class="home-title">XelTool</h1>
  <div class="row">
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar Prices</h2>
        <div class="img_div">
          <img class="home_img" src="https://images.unsplash.com/photo-1590594841715-70fe3b7c51ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Bazaar Prices" width="100%" />
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar Flipper</h2>
        <div class="img_div">
          <img class="home_img" src="https://images.unsplash.com/photo-1590594841715-70fe3b7c51ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Bazaar Flipper" width="100%" />
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar High Demand</h2>
        <div class="img_div">
          <img class="home_img" src="https://images.unsplash.com/photo-1590594841715-70fe3b7c51ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Bazaar High Demand" width="100%" />
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="home_card">
        <h2 class="card_title">Bazaar NPC Re-Sell</h2>
        <div class="img_div">
          <img class="home_img" src="https://images.unsplash.com/photo-1590594841715-70fe3b7c51ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Bazaar NPC Re-Sell" width="100%" />
        </div>
      </div>
    </div>
  </div>
</div>