Заставьте <li>вести себя как стандартный <div>, используя загрузочные столбцы 4

Question

Я хочу использовать <ol>> <li> с bootstrap столбцами. Я хочу, чтобы они вели себя так, как если бы <li class="col-6 col-md-3"> был <div class="col-6 col-md-3">.

Возможно ли это?

ol.test {
  list-style-type: none;
  display: inline-block;
}

li {
  display: block;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />


<div class="row mt-4">
  <ol class="test">
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
  </ol>
</div>

Answer 1

Да, это абсолютно возможно. Просто примените классы столбцов, такие как <li class="col-md-3">LIST ITEM</li>

Я бы обязательно обернул его в <div class="row"></div>, чтобы очистить поплавки, или, как упоминал Костас, примените .row к ol