Question

我使用Bootstrap 3和网格系统。我有以下HTML来显示一种导航。问题是我的按钮组无法居中。我已经尝试过内置的课程＆＃34; center-block＆＃34;和不同的CSS方法，但失败了。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="btn-group btn-group-lg">
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
            </div>
        </div>
    </div>
</div>

Answer 1

<p class="text-center">Center aligned text.</p>

这将对齐Bootstrap中的内容。直接取自bootstrap documentation。

Answer 2

您可以通过应用

使按钮组div居中

display:inline-block

然后申请父div

text-align:center

此处示例：http://jsfiddle.net/u7g3p/

Answer 3

您可以将text-akign: center;分配给班级.btn-group

DEMO http://jsfiddle.net/D2RLR/6159/

Answer 4

你可以添加一个类'text-center'，它是bootstrap默认类来定义text-align：center，但是bootstrap中的'btn-group'类被默认定义为display：inline-block，因此这个div的宽度不会是100％，以使你的内部链接居中对齐。

如何修复 -

DOM更改，将类文本中心添加到此div- <div class="btn-group btn-group-lg text-center">

CSS更改 -

.btn-group{
   width:100% (or) display:block;
 }

Answer 5

只需将'text-center'类添加到'btn-group'父级。

<div class="col-xs-12 text-center">
            <div class="btn-group btn-group-lg">
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
            </div>
        </div>

Answer 6

或者你可以在div之前和之后添加标签

<center>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="btn-group btn-group-lg">
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a>
            </div>
        </div>
    </div>
</div>
</center>

以下是经过修改的链接：http://jsfiddle.net/sunilkjt/4bq1f320/

由于

Bootstrap div列居中

6 个答案: