为了账号安全,请及时绑定邮箱和手机立即绑定

将内容置于Bootstrap 4中的列中

/ 猿问

将内容置于Bootstrap 4中的列中

将内容置于Bootstrap 4中的列中

我需要帮助来解决问题,我需要将内容集中在bootstrap4中的列中,请在下面找到我的代码

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div></div>


查看完整描述

3 回答

?
撒科打诨

Bootstrap 4中有多种水平居中方法 ......

  • text-center对于中心display:inline元素

  • offset-*或者mx-auto可以用于中心列col-*

  • 或者,justify-content-centerrow中央柱col-*

  • mx-auto用于居中的display:block元素d-flex

mx-auto(自动x轴边距)将居中display:blockdisplay:flex具有已定义宽度的元素(%,vw,px等)。默认情况下,Flexbox在网格列上使用,因此还有各种flexbox居中方法。

Bootstrap 4中心方法的演示

在您的情况下,使用mx-auto中心col-3text-center中心它的内容..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center        </div>
    </div></div>

http://www.codeply.com/go/GRUfnxl3Ol

或者,使用justify-content-center上Flexbox的元素(.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center        </div>
    </div></div>


查看完整回答
反对 回复 2019-08-13
?
侃侃无极
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here        </div>
    </div></div>

我已经使用了justify-content-center类而不是mx-auto

请访问https://jsfiddle.net/sarfarazk/4fsp4ywh/


查看完整回答
反对 回复 2019-08-13
  • 3 回答
  • 0 关注
  • 245 浏览
我要回答

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信