浮動引導列

Question

我有一個頁腳，我做了一個網頁看起來像這樣

正如你可以看到右列將不符合留在他人和它們之間的間距甚至沒有。每列後面的漸變是一張圖片。我嘗試使用拉右，但當我去調整大小，然後它看起來很奇怪，並不堆疊在彼此之上。這裏是我的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; 
} 

我需要每個部分被均勻分佈的，當它調整到正確疊加。頁腳橫跨整個容器的FYI。

Answer 1

的 <div class = 'row'>內

可以添加<div class = "col-sm-4 '>如圖引導

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

Answer 2

的Grid System由於您使用的引導您可以將行中使用的列，我已經加入這個代碼。看看boostrap網格系統如何工作以便進一步理解。

看到Updated Code

.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 { 
 
    margin-bottom: 20px; 
 
    float: right; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-4 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="col-xs-4 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="col-xs-4 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>

Answer 3

正如你所知道用引導你得到一個12個格跨越運行。

您需要類似： div class =容器的行。

div class= col-md-4 // for all 3 boxes. This assumes no margins or padding on divs otherwise change 4 to a 3