Twitter bootstrap 引导3网格对齐问题

好的，我是一个网页设计新手，所以这对你来说可能是一个简单的问题。我正试图在引导中重新创建它：

我走的是这条路，但似乎不是正确的：

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="col-md-2 text-center">
            <a href="#" class="btn btn-default btn-sm">pricing</a>
          </div>

          <div class="col-md-2 text-center">
            <a href="#" class="btn btn-default btn-sm">advertise</a>
          </div>

          <div class="col-md-2 text-center">
            <a href="#" class="btn btn-default btn-sm">book hotel</a>
          </div>

          <div class="col-md-2 text-center">
            <a href="#" class="btn btn-default btn-sm">sponsor our <br>intl course</a>
          </div>
          <div class="col-md-2 text-center">
            <a href="#" class="btn btn-default btn-sm">hold events/<br>meetings</a>
          </div>

        </div>
      </div>
    </div>

我的挑战之一是保持每个按钮的宽度和高度相同

非常感谢您的帮助

谢谢

---

托尼，事实上你做错了。这只是一个巧合，你有它运行，但在其他情况下，它不会，你会有其他问题，如对齐，等等

你的问题是你正在嵌套col。。。。内柱。。。。当您实际需要使用.row-->.col-…-x时（其中x是一个数字，所有这些数字加上任何偏移量之和必须为12）

简言之：去掉col-md-12容器，使用带有这些按钮的网格系统，因此第一列、第一行应该是

，依此类推

关于圆圈按钮问题，请将HTML更改为：

<div class="col-md-2 text-center"> <a href="#" class="btn btn-default btn-circle">
    <span>important <br/>dates</span>
    </a>
</div>

---

既然你自己做得很好，试着用上面的解释自己做吧，尽管你可以检查（但实际上，试着自己做，并且只使用Bootply作为最后的资源）

好的，你走的是对的，但是为什么不试着完成它，看看你能想出什么，如果无法获得完整的解决方案，请寻求帮助？你已经开始了，但是一半就是一半。同意@Mattd你走的路是对的，记住现在你可能想要按钮有一个固定的重量和高度，真的不知道它们是否是以动态方式创建的，你可以开始用bootply测试并在这里分享你的结果，例如，三个第一按钮的行高度固定：这种设计应该很容易实现。只需阅读官方网站上有关引导的网格系统的文档，您就应该能够获得它。好的，到目前为止，我得到的是：我遇到了一个关于类型在圆圈中的位置的问题，但除此之外，我似乎很接近。我确实注意到整个容器似乎没有居中？非常感谢Devin！有了你的解释，我可以自己解决这个问题。很高兴能帮上忙，知道你是一个人做的，我知道你可以！如果答案有用，请将其标记为正确，以便其他用户可以从中受益

.btn-circle {
    position:relative;
    text-align:center
}
.btn-circle span {
    position:absolute;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
}