Question

我想创建的效果就像这样

在桌面上，有一些包含1到3个按钮的情况。

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

如果少于3个按钮，则应该对齐中心。

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

|       [button 1] [button 2]    |

在移动设备上，无论有多少个按钮，都可以对齐中心

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

我开发了使用bootstrap网格，但似乎不适合动态情况：

<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

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

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

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

Answer 2

如果你可以使用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 3

这是一个最简单的解决方案 - 在保持引导网格原理的同时 - 将添加适当的类（无论您输出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的技术来实现这一目标。

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

3 个答案: