居中 bootstrap 行

Question

我正在使用 bootstrap 列表组将 link 显示到 iTunes、亚马逊和 google 游戏。每个 link 都是它自己的列表组项目。我希望所有这些项目都居中对齐。我该怎么做？

<!-- Download badges -->
<div class="container-fluid">
    <div class="row">
        <div class="list-group">
            <div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
                <a href="http://hyperurl.co/cplq6c" class="list-group-item" target="_blank">
                    <i class="fa fa-apple fa-2x" aria-hidden="true"></i>itunes</a>
            </div>

            <div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
                <a href="http://hyperurl.co/1qcfl6" class="list-group-item" target="_blank">
                    <i class="fa fa-amazon fa-2x" aria-hidden="true"></i>amazon</a>
            </div>

            <div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
                <a href="http://hyperurl.co/mb95g4" class="list-group-item" target="_blank">
                    <i class="fa fa-google fa-2x" aria-hidden="true"></i>google play</a>
            </div>
        </div>
    </div>
</div>

为了更清楚，我想让列表组在页面上居中。

Answer 1

使用col-lg-offset-*类。 Demo。您需要在第一栏中使用它。

<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2 col-lg-offset-3">
 ...
</div>

Answer 2

改变

<div class="container-fluid">

至

<div class="container">

居中 bootstrap 行

Center bootstrap row

html

css

row

center

twitter-bootstrap