Question

我在900px宽的块中间添加了三个按钮，每个按钮都有自己的列。问题是按钮从块的开始和外部开始，因此它们分散到宽阔的范围。

我很想知道如何使三个按钮在中间靠近，同时仍然有移动折叠的列。

如果我允许添加链接，页面就在这里。 https://webhost.pro/website-builder.php

我试图在这里添加代码，但Stackoverflow就死了。

我使用了两条div级线。每列的行间距-40和col-sm-4。

谢谢！

Answer 1

您可以添加最大宽度。

.row.center-block {
    max-width: 650px;
}

Answer 2

选项＃1 - 为每个按钮添加.btn-block

如果您将班级.btn-block添加到每个按钮（<a>元素），则每个按钮都会填充其所在列的可用空间。效果是它们会出现更加紧密。

作为额外的奖励，这些按钮在移动时叠加时也会显示全宽。我认为大多数人会同意这样的显眼按钮在全宽时在手机上看起来更好。

<div class="row spacing-50 center-block">
    <div class="col-sm-4">
        ...<a class="btn btn-lg btn-block btn-success">Site Builder Support</a>...
    </div>
    <div class="col-sm-4">
        ...<a class="btn btn-lg btn-block btn-primary">Site Builder Demo</a>...
    </div>
    <div class="col-sm-4">
        ...<a class="btn btn-lg btn-block btn-info">Web Hosting Plans</a>...
    </div>
</div>

选项＃2 - 使用额外的内行来限制宽度

基本上，您现在连续有三个.col-sm-4列。如果添加第二行（内行），则可以使用类.col-sm-10和.col-sm-offset-1来实现所需的效果。新的内部行不是很宽，但仍然以.col-sm-10和.col-sm-offset-1类为中心。你会改变......

<div class="row spacing-50 center-block">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>                  
</div>

到此......

<div class="row spacing-50 center-block">
    <div class="col-sm-10 col-sm-offset-1">
        <div class="row">
            <div class="col-sm-4">
                ...
            </div>
            <div class="col-sm-4">
                ...
            </div>
            <div class="col-sm-4">
                ...
            </div>
        </div>
    </div>
</div>

选项＃3 - 同时执行

您还可以添加其他行并将.btn-block类添加到每个<a>。按钮会更靠近在一起，它们会填充列中的所有空间（使它们的宽度相等），并且它们可以很好地堆叠在移动屏幕上。

<div class="row spacing-50 center-block">
    <div class="col-sm-10 col-sm-offset-1">
        <div class="row">
            <div class="col-sm-4">
                ...<a class="btn btn-lg btn-block btn-success">Site Builder Support</a>...
            </div>
            <div class="col-sm-4">
                ...<a class="btn btn-lg btn-block btn-primary">Site Builder Demo</a>...
            </div>
            <div class="col-sm-4">
                ...<a class="btn btn-lg btn-block btn-info">Web Hosting Plans</a>...
            </div>
        </div>
    </div>
</div>

使列更紧密

2 个答案: