Css 引导卡-在移动设备上查看时出现居中问题
我对此进行了广泛的研究,但毫无结果。我使用下面的代码输出它下面的屏幕截图,但是当在移动设备上查看时,它会向左移动 有人能帮我解决这个问题吗?提前谢谢Css 引导卡-在移动设备上查看时出现居中问题,css,user-interface,bootstrap-4,frontend,user-experience,Css,User Interface,Bootstrap 4,Frontend,User Experience,我对此进行了广泛的研究,但毫无结果。我使用下面的代码输出它下面的屏幕截图,但是当在移动设备上查看时,它会向左移动 有人能帮我解决这个问题吗?提前谢谢 <div class="container"> <div class="row g-mb-20"> <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center"> <div class="card" style
<div class="container">
<div class="row g-mb-20">
<div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
<div class="card" style="width: 18rem;">
<img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
<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-6 col-lg-3 g-mb-50 justify-content-center">
<div class="card" style="width: 18rem;">
<img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
<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-6 col-lg-3 g-mb-50 justify-content-center">
<div class="card" style="width: 18rem;">
<img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
<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-6 col-lg-3 g-mb-50 justify-content-center">
<div class="card" style="width: 18rem;">
<img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
<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
d-flex
添加到列
容器中(您已经拥有classjustify资源中心
):
卡片标题
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
卡片标题
一些基于卡片标题的快速示例文本,构成了卡片内容的大部分
您应该添加col-12,以便它占据移动设备上的整个屏幕。添加col-12或col-sm-12不会使卡全宽。我真的很感激这个想法,也很希望能实现。是的,我的错。我想是你的style=“width:18rem”导致了这个问题。就是这样,谢谢!每一条边上都有一个微小的边距,但我认为负边距可以解决这个问题,或者可能是“容器流体”。默认情况下可能是Bootstrap的排水沟。d-flex成功了!非常感谢你!一旦我达到15个代表的分数,我一定会回来给你投票。现在,为了弄清楚如何在手机上获得全宽的卡,我也被卡在这上面了。多谢各位+1.