Html 自助预订网格

我正在使用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>

---

当前的设计有什么问题，或者你能准确地说明这个问题吗？我需要使它具有响应性，这就是我使用引导的原因