Question

我正在尝试使用Bootstrap 3.3.7创建一个降临日历，类似于http://2015.itsashapechristmas.co.uk/

我正在使用的标记是

<div class="container">

      <div class="row grid">
          <div class="col-md-2 grid-item">1</div>
          <div class="col-md-2 grid-item">2</div>
          <div class="col-md-2 grid-item">3</div>
          <div class="col-md-2 grid-item">4</div>
          <div class="col-md-2 grid-item">5</div>
          <div class="col-md-2 grid-item">6</div>
      </div>

      <!-- Repeat --> 

</div>

我放  我在

中使用类似的6个数字列

我想让数字显示为居中和方形（根据示例链接），因此使用了这个：

.col-md-2

理想情况下，我希望在调整视口大小时将其折叠为较小的列，但在.grid { font-size: 48px; } .grid-item { padding: 60px; text-align: center; }的断点处，它只会折叠为单个列。

我是以正确的方式做到这一点还是有更好的方法来实现这一目标？

Answer 1

您需要为div添加更多类。像col-xs-6这样的东西会在额外的小视口上给你2个相等的列，col-sm-4会在小视口上给你三个相等的列。

阅读http://getbootstrap.com/css/#grid

使用Bootstrap的出现日历

1 个答案: