使柱子更接近

Question

我在一个900 in宽块的中间添加了三个按钮，每个按钮都有自己的列。问题是按钮开始于块的开头和外部，所以它们被分散到很宽的地方。

我很想知道如何使这三个按钮在中间紧贴在一起，同时为了便于移动的折叠而仍然有列。

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

我试图在这里添加代码，但Stackoverflow却从中消失了。

我用的是两条div级线路。每列的行距-40和头-sm-4。

谢谢!

Answer 1

你可以增加一个最大宽度。

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

Answer 2

选项#1 -向每个按钮添加..btn块

如果将类.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>

​

​