Floating 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; 
} 

мне нужно каждый раздел, чтобы быть равномерно и правильно складывать, когда она изменяется. И нижний колонтитул охватывает весь контейнер FYI.

Answer 1

в <div class = 'row'> можно добавить <div class = "col-sm-4 '>, как показано в Grid System бутстраповского

<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-сетки для дальнейшего понимания.

см 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 = row для контейнера.

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