卡体居中（引导）[重复]
我有一个小问题与卡体，我想有两个列在中央，正如你在图片中看到的，它有点在左边比较按钮...我试过一些类在引导，但我似乎找不到正确的一个。希望你能帮助我[在伊舍伍德之后编辑]
所以我试着把文本放在中心，但我不知道为什么它不能像代码段一样工作...
<div class="card">
<div class="card-body ">
<h5 class="card-title text-center">Jours</h5>
<div>
<div class="d-flex justify-content-center">
<div class="col-sm-6 mb-3 text-center">
<fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
<div *ngFor="let jour of semaine" class="ms-3 form-check">
<input class="form-check-input" type="checkbox" [value]="jour">
<label class="form-check-label d-inline-flex">{{jour}}</label>
</div>
</div>
<div class=" col-sm-6 mb-3 text-center">
<fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
<div *ngFor="let jour of semaine" class="ms-3 form-check">
<input class="form-check-input" type="checkbox" [value]="jour">
<label class="form-check-label d-inline-flex">{{jour}}</label>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary">Valider</button>
</div>
</div>
共有1个答案
如果我理解正确，只需在每列中包含text-center:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="card">
<div class="card-body ">
<h5 class="card-title text-center">Jours</h5>
<div>
<div class="d-flex justify-content-center">
<div class="col-sm-6 mb-3 text-center">
<fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
<div *ngFor="let jour of semaine" class="ms-3 form-check">
<input class="form-check-input" type="checkbox" [value]="jour">
<label class="form-check-label d-inline-flex">{{jour}}</label>
</div>
</div>
<div class=" col-sm-6 mb-3 text-center">
<fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
<div *ngFor="let jour of semaine" class="ms-3 form-check">
<input class="form-check-input" type="checkbox" [value]="jour">
<label class="form-check-label d-inline-flex">{{jour}}</label>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary">Valider</button>
</div>
</div>
</div>-
我想创建一个居中的引导导航栏与标志。我是这样看的： 我怎样才能做到这一点呢？
-
我试图将导航栏项目水平居中对齐，但它们向左对齐。 有人能帮忙吗？ 这是一个桌面问题-只是要明确，我有这个问题在桌面级别。 这是我目前的代码： 演示：https://jsfiddle.net/cjoasysz/
-
我正在使用引导创建导航栏，但文本位于左侧。我根本不知道如何让文本位于导航栏的中心，并在不同设备上调整大小和查看站点时保持在那里。我试过绕过浮动：左；使用下面的代码，但我仍然无法理解。 这东西很新鲜，如果它直视着我很抱歉。 谢谢。
-
问题内容： 我正在使用bootstrap 4 alpha3。 我想在整个页面的中间水平放置卡片。 我尝试了卡的bootstrap 4示例页面上列出的所有不同选项。 我该如何实现？ 问题答案： 为.card添加CSS 更新： 您可以使用引导程序4中可用的类来居中放置卡。
-
我需要中心（水平和垂直）我的输入页面的内容。我正在使用Bootstrap 4 beta版，我在BS页面上按指南操作，但它不起作用-https://getbootstrap.com/docs/4.0/layout/grid/ 你能帮我修一下吗？谢谢
-
我有一些社交媒体图标使用引导字体-很棒的图标。我的问题是图标没有居中。 这里是我的代码，它的大部分是从一个在线来源复制和粘贴。 我也希望它适用于移动以及。我已经玩了一些边距和文本对齐，但似乎没有什么工作如预期。感谢任何帮助。