Размещение 3 карточек внутри 8 столбцов с правым полем

Question

У меня есть три карты, которые я хочу исправить внутри 8 столбцов и оставить поле 10 пикселей справа.

Это код

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
<div class="col-md-8">

      <div class="top_stories row">
      <div class="card col-md-4 " >
          <img class="card-img-top" src="https://picsum.photos/536/354" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
         <div class="card col-md-4 " >
          <img class="card-img-top" src="https://picsum.photos/536/354" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
         <div class="card col-md-4 cw" >
          <img class="card-img-top" src="https://picsum.photos/536/354" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
</div>
      </div>
      <div class="col-md-4">
      <p>hello world</p>
      </div>
</div>

У меня есть поле 10 пикселей с использованием этого кода

.card{
    margin-right: 10px !important;
}

Это скрипка https://jsfiddle.net/s017mn4d/

Есть ли метод, который я могу использовать, чтобы уместить 3 карты одинаковой ширины в 8 столбцов?.

Answer 1

Вы должны использовать .card в .col-md-4 div. Я также добавил padding-right: 0 и padding-left: 0 для col-md-4. Потому что по умолчанию он имеет отступ 15 пикселей справа и слева.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.card {
  margin-right: 10px !important;
}

/* added */
.col-md-4 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="col-md-8">
    <div class="top_stories row">
      <div class="col-md-4">
        <div class="card ">
          <img class="card-img-top" src="https://picsum.photos/536/354" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://picsum.photos/536/354" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card cw">
          <img class="card-img-top" src="https://picsum.photos/536/354" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <p>hello world</p>
  </div>
</div>