我正在使用PHP生成一系列项目。我使用Bootstrap 4卡来显示它们。我想在sm和更大的每行显示4张卡片。目前情况已经如此。在xs上我想连续显示2个项目。无论我尝试什么，我都无法改变xs的显示方式。每行总有一个项目。我使用Google Chrome开发者工具查看移动设备上的内容。
我看了Bootstrap 4.0 Grid System Layout not working，我似乎遵循了基本规则。一行只有子列的立即列。在“col-xs-6 col-sm-3”前添加“col-12”也没有什么区别。
我错过了什么？
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="under-the-radar-vol-2">
<img class="card-img-top" src="http://via.placeholder.com/425x425">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="heavy-entertainment-show">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Heavy Entertainment Show">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="under-the-radar-vol-1">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Under the Radar Vol 1">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="swings-both-ways">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Swings Both Ways">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="take-the-crown">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Take the Crown">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="reality-killed-the-video-star">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Reality Killed the Video Star">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="rudebox">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Rudebox">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="intensive-care">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Intensive Care">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="live-summer-2003">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Live Summer 2003">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="escapology">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Escapology">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="swing-when-youre-winning">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Swing When You're Winning">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="sing-when-youre-winning">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Sing When You're Winning">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="ive-been-expecting-you">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="I've Been Expecting You">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card">
<a href="life-thru-a-lens">
<img class="card-img-top" src="http://via.placeholder.com/425x425" alt="Life Thru a Lens">
<div class="card-block text-center">
<p><h4 class="card-title row-eq-height">Title</h4></p>
</div>
<p class="card-footer text-muted text-center small">Date</p>
</a>
</div>
</div>
</div>