Question

我正在使用bootstrap list-group来显示指向itunes，amazon和google play的链接。每个链接都是自己的list-group-item。我希望所有这些项目都能彼此内联。我该怎么做？

<!-- 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">

中心引导行

2 个答案: