<分区>
<分区>
编辑 我发现了问题所在，Code Pen 为 bootstrap 4 使用了错误的 url。感谢已经回答的人。
这是我的代码
<div class="container">
<div class="quote-box text-center">
<div class="row">
<div class="col quote">
asdasdasdsa
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
<button class="btn btn-primary social">asasas</button>
<button class="btn btn-primary social">asasasas</button>
</div>
<div class="col-5">
</div>
<div class="col text center">
<button class="btn btn-primary"></button>
</div>
</div>
</div>
</div>代码笔是这个，https://codepen.io/msrashid/pen/EboJoq
行对齐文本居中不会使列垂直居中。
文本居中不会使按钮在列中居中。
不确定是什么问题。
最佳答案
您的集中化确实有效。问题是您的列没有占据整个宽度，因此看起来没有集中。
为了解决这个问题，您需要使用 Bootstrap column classes 。你在哪里col类，您要使用 col-1通过col-12 .一行总有 12 列，因此总计总计不超过 12 列。
你的行 ? - 5 - ?不能“集中”，如7 (12 - 5) 不能完全除以二(5 的两边都是 3.5)。因此，在以下示例中，我将每个段视为独立的行:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="quote-box text-center">
<div class="row">
<div class="col-12 quote">
asdasdasdsa
</div>
</div>
<div class="row align-items-center">
<div class="col-12 text-center">
<button class="btn btn-primary social">asasas</button>
<button class="btn btn-primary social">asasasas</button>
</div>
</div>
<div class="row">
<div class="col-12">
</div>
</div>
<div class="row">
<div class="col-12 text center">
<button class="btn btn-primary"></button>
</div>
</div>
</div>
</div>希望对您有所帮助! :)
关于jquery - 为什么居中和对齐在 bootstrap 4 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47382611/