创建一个相同宽度的按钮列表答案

【问题标题】：Create a list of button which is the same width创建一个相同宽度的按钮列表
【发布时间】：2016-06-28 08:46:30
【问题描述】：

我想做出的效果是这样的

在桌面上，有些机箱有 1 到 3 个按钮。

如果是 3 个按钮，它应该与 body 的整个宽度相匹配，并在按钮之间留出一个边距。

如果少于 3 个按钮，它应该居中对齐。

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

|       [button 1] [button 2]    |

在移动端，无论多少按钮，居中对齐

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

我是用bootstrap grid开发的，但是好像不适合动态情况：

<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 更适合这种情况？非常感谢您的帮助。

【问题讨论】：

标签： html css twitter-bootstrap padding

【解决方案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

【讨论】：

【解决方案2】：

这是一种最简单的解决方案——在保持引导网格理念的同时——将添加适当的类（无论您在哪里输出 HTML 代码或创建那些 DOM 元素）来偏移列。

假设您希望您的按钮在桌面上始终为 4 列宽，您只需将正确的 offsetting class 添加到第一列，.col-sm-offset-2 ((12 - 2 * 4)/2) 两列，.col-sm-offset-4 (@ 987654326@) 只需一个按钮。

如果动态添加这些类不是一个选项，您可以借助一种称为 Quantity Queries for CSS 的技术来实现。

【讨论】：

【解决方案3】：

然后你可以玩一些移动媒体查询。

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

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

【讨论】：