Bootstrap 引导法行容器的中心内容

jobtbby3 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(5)|浏览(171)

我有下面的代码，我想将外部“row”div的“well”元素居中。我尝试了各种方法，如text-align：center（仅将文本居中，而不是内部DIV元素。
这里有一个jsfiddle，我得到了一个“well”平铺的页面，在4个左右的平铺之后，它就换行了，但是如果小于4个，它们就应该出现在页面的中心。

<body class="container-fluid">
    <div class="row">
        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>

        </div>

        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>
        </div>
    </div>
</body>

twitter-bootstrap

来源：https://stackoverflow.com/questions/13462535/center-contents-of-bootstrap-row-container

5条答案

按热度按时间

sulc1iza1#

在Bootstrap 4中，有一个css类专门用于此。下面将居中显示行内容：

<div class="row justify-content-center">
  ...inner divs and content...
</div>

有关详细信息，请参见：https：//v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment。

赞(0）回复(0）举报 2022-12-16

zf9nrax12#

我通过执行以下操作解决了这个问题：

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>

赞(0）回复(0）举报 2022-12-16

p1iqtdky3#

对于Bootstrap 4，请使用以下代码：

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

参考：https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

赞(0）回复(0）举报 2022-12-16

sshcrbum4#

试试这个，管用！

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

然后，在css中定义文档中center div和center的宽度：

.center {
    margin: 0 auto;
    width: 80%;
}

赞(0）回复(0）举报 2022-12-16

jyztefdp5#

这是我的回答：
将此单词与行相加

justify-content-md-center

这里有一个链接！www.example.com的参考资料getbootstrap.com
下面是代码：

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-auto">
            The content will be centered here
        </div>
 
    </div>
</div>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 引导法行容器的中心内容

5条答案

相关问题

热门标签

最新问答