Bootstrap 3 网格对齐问题

Question

好的，我是一名网页设计新手，所以这对您来说可能很简单。我正在尝试在 bootstrap:

中重新创建它

这是我正在走的路，但似乎不对：

    <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>

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

非常感谢任何帮助！

谢谢！

托尼

Answer 1

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

您的问题是当您实际需要使用 .row --> .col-...-x（其中 x 是一个数字并且所有这些数字加上您拥有的任何偏移量的总和必须为 12）。

简而言之：摆脱你的 col-md-12 容器并使用带有这些按钮的网格系统，所以你的第一个 col，第一行应该是 <div class="col-md-2 col-md-offset-1"> 等等

关于你的圈子按钮问题，将你的 HTML 更改为：

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

然后将其添加到您的 CSS:

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

因为你实际上自己做的很好，尝试使用上面的解释自己做，虽然你可以检查 full code here（但实际上，尝试自己做并且只使用 Bootply 作为最后一个资源）

Bootstrap 3 网格对齐问题

Bootstrap 3 grid alignment issue

twitter-bootstrap

twitter-bootstrap-3