Создать список кнопок с одинаковой шириной

Question

Эффект, который я хотел бы создать, такой вот

На рабочем столе есть случаи, в которых есть от 1 до 3 кнопок.

Если 3 кнопки, они должны совпадать с полной шириной корпуса и оставить границу между кнопками.

Если менее 3 кнопок, он должен выровнять центр.

|[button 1] [button 2] [button 3]| 

|  [button 1] [button 2] | 

на мобильных устройствах, независимо от того, как много кнопок, совместите центр

|  [button 1] | 
|  [button 2] | 
|  [button 3] | 

Я разработал с помощью начальной загрузки сетки, но это, кажется, не подходит для динамического случая:

<div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
    <a class="btn btn-blue get_loc">button 1</a> 
</div> 
<div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
    <a class="btn btn-blue get_loc">button 2</a> 
</div> 
<div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
    <a class="btn btn-blue get_loc">button 3</a> 
</div> 

Как к изменить или просто использовать CSS лучше для этого случая? Большое спасибо за помощь.

Answer 1

Если вы можете использовать flex, (вы можете проверить here) Таким образом, вы можете использовать следующий CSS:

.same-width-button { 
 
    text-align:center !important; 
 
    float:none !important; 
 
    flex:1; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .row { 
 
    display:flex; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row text-center"> 
 
    <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
 
    <a class="btn btn-default get_loc">button 1</a> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
 
    <a class="btn btn-default get_loc">button 2</a> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
 
    <a class="btn btn-default get_loc">button 3</a> 
 
    </div> 
 
</div> 
 
<hr /> 
 
<div class="row text-center"> 
 
    <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
 
    <a class="btn btn-default get_loc">button 1</a> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 text-center res-pad same-width-button"> 
 
    <a class="btn btn-default get_loc">button 2</a> 
 
    </div> 
 
</div>

http://jsbin.com/cubebu/edit?html,css

Answer 2

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

https://codepen.io/anon/pen/wGzgOX

.button{ 
border: 1px solid black; 
margin: 0 auto; 
display:inline-block; 
} 
.cont{ 
text-align: center; 
} 

Answer 3

Th является самым простым решением - при сохранении философии сетки начальной загрузки - было бы добавить соответствующий класс (везде, где вы выведете этот код HTML или создать эти элементы DOM), чтобы компенсировать столбцы.

Предполагая, что вы хотите, чтобы ваши кнопки, чтобы всегда быть 4 столбцов в ширину на рабочем столе, вы бы просто добавить надлежащее offsetting class к первому столбцам, .col-sm-offset-2 ((12 - 2 * 4)/2) на двоих, и .col-sm-offset-4 ((12 - 1 * 4)/2) только для одной кнопки.

---

При добавлении этих классов динамически не вариант, вы можете получить там с помощью методики, называемой Quantity Queries for CSS.