У меня есть эта сетка, в каждой строке по 4 столбца, в каждом столбце по одной карточке. html код:
<div class="col-sm-9">
<div class="container mr-3 pt-3 pl-1">
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>
<div class="row">
<div class="col-sm-3">
<div class="card p-3" style="width: 18rem;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<svg class="bd-placeholder-img card-img-top" width="55%" height="180" ...></svg>
<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> <!-- col-sm-3 -->
<div class="col-sm-3">
<div class="card p-3" style="width: 18rem;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<svg class="bd-placeholder-img card-img-top" width="55%" height="180" ...></svg>
<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> <!-- col-sm-3 -->
<div class="col-sm-3">
<div class="card p-3" style="width: 18rem;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<svg class="bd-placeholder-img card-img-top" width="55%" height="180" ...></svg>
<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> <!-- col-sm-3 -->
<div class="col-sm-3">
<div class="card p-3" style="width: 18rem;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<svg class="bd-placeholder-img card-img-top" width="55%" height="180" ...></svg>
<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> <!-- col-sm-3 -->
</div> <!-- row -->
</div>
</div>
Я хочу, чтобы ширина строки соответствовала ширине окна браузера, при этом каждая карта настраивалась так, чтобы все четыре подгонки отображались на экране (сейчас мне нужна горизонтальная прокрутка для достижения край строки).
кто-нибудь знает, как это сделать sh что?
обновить
приведенный выше код является частью этого :
<div class="row">
<div class="col-sm-3">
<div class="list-group ml-3 pt-3 pr-1">
<a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
</div>
</div>
<div class="col-sm-9">
...
</div>
<div>