我在预订网格上使用bootstrap 尝试对之前的设计做出响应。
这是左边的当前设计和右边的模型，
如您所见，顶部是当前周（红色），两侧有箭头。 然后，当前日期（白色）。
我想只使用8列
这是我到目前为止所得到的...感谢您的帮助。
<div class="grid-calendar">
<div class="row calendar-week-header">
<div class="col-xs-1 grid-cell"><div><div><span></span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>s</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>M</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>T</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>W</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>T</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>F</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>S</span></div></div></div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell"><div><div><span></span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>31</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>1</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>2</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>3</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>4</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>5</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>6</span></div></div></div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell"><div><div><span></span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>7</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>8</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>9</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>10</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>11</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>12</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>13</span></div></div></div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell"><div><div><span></span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>14</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>15</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>16</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>17</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>18</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>19</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>20</span></div></div></div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell"><div><div><span></span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>21</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>22</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>23</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>24</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>25</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>26</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>27</span></div></div></div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell"><div><div><span></span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>28</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>29</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>30</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>1</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>2</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>3</span></div></div></div>
<div class="col-xs-1 grid-cell"><div><div><span>4</span></div></div></div>
</div>
</div>