对齐小设备上的col 4按钮

Question

请看http://jsfiddle.net/eDNH5/201/

下面的read-more以大型显示器(3列)为中心，但如果您缩小窗口以模拟smartphne (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