在小型设备上对齐col-sm-4中的按钮

Question

请参阅http://jsfiddle.net/eDNH5/201/

下面的 read-more 以大显示（3列）为中心，但如果缩小窗口以模拟智能手机（1列），则它会向左对齐。我怎样才能让它居中？

<div class="col-sm-4"></div>
<a id="readmore" class="read-more col-sm-4" data-toggle="collapse" data-parent="#accordion<?php echo $track->Id; ?>" href="#collapse<?php echo $track->Id; ?>">Show More</a>
<div class="col-sm-4"></div>

.read-more {
    background-color:#eee;
    color:#666;
    font-weight:bold;
    text-align:center;
    padding:10px 0;
    cursor:pointer;
    text-decoration: none;
}

.read-more:hover {
    color:#333;
    background-color:#ddd;
}

.read-more:a visited {
    color:#666;
}

Answer 1

重新构建标记并添加.text-center

<div class="col-sm-4"></div>
<div class="col-sm-4 text-center">
  <a id="readmore" class="read-more" data-toggle="collapse" data-parent="#accordion<?php echo $track->Id; ?>" href="#collapse<?php echo $track->Id; ?>">Show More</a>
</div>
<div class="col-sm-4"></div>

JSFiddle