html - float Bootstrap 列

Question

我正在为一个看起来像这样的网页制作页脚

如您所见，右侧的列不会与其他列保持一致，并且它们之间的间距不均匀。每列后面的渐变是一张图片。我尝试使用 pull-right 但是当我调整大小时它看起来很奇怪并且不会堆叠在一起。这是我的 HTML:

<div class="row">
  <div class="gradient left">
        <div class="text-center button-center">
        <a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
        <i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS<br>PORTAL</a>
        </div>
    </div>

    <div class="gradient text-center center">
        <div class="vertical-center">
        <h4 id="connect">Connect With Us!</h4>

        <a href="https://www.facebook.com/meritnetwork"><i class="fa fa-facebook fa-2x"></i></a>
        <a href="https://twitter.com/meritnetwork"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="http://merit.edu/contact/"><i class="fa fa-envelope fa-2x"></i></a></div>
</div>

    <div class="gradient text-center right">

        <h3 id="ML">Click to view our upcoming events</h3>
        <a href="http://merit.edu/learning/"><i class="fa fa-calendar fa-2x" ></i></a></div>

</div> 

这是 CSS:

.gradient{
    width: 278px; 
    height: 106px;   
    background-image: url('gradient.png');

}
.button-center{
    position: relative;
    top: 50%;
    transform: translateY(-50%);   
}

.vertical-center{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.left{
    float: left;
}

.center{
    margin-right: auto; 
    margin-left: auto; 

}
.right{
    float: right; 
}

我需要每个部分间隔均匀，并且在调整大小时正确堆叠。页脚跨越整个容器，仅供引用。

Answer 1

在 <div class = 'row'> 内可以添加 <div class = "col-sm-4 '>如Grid System所示 Bootstrap

<div class="row">
    <div class="col-sm-4" style='background: #55D946'>a</div>
    <div class="col-sm-4" style='background: #5333EC'>b</div>
    <div class="col-sm-4" style='background: #D8F02F'>c</div>
</div>