我在一个 900 像素宽的块中间添加了三个按钮，每个按钮都有自己的列。问题是按钮从块的开头和外部开始，因此它们分散得很宽。
我很想知道如何让三个按钮在中间靠得很近，同时仍然有列以便移动折叠。
如果允许我添加链接，页面就在这里。 https://webhost.pro/website-builder.php
我尝试在此处添加代码，但 Stackoverflow 因它而死。
我正在使用两条 div 类行。每列的行间距为 40 和 col-sm-4。
谢谢！
【问题讨论】：
标签： css multiple-columns
您可以添加最大宽度。
.row.center-block {
max-width: 650px;
}
【讨论】：
选项 #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>
【讨论】：