今天完成的事情：今天主要是困到任务8中间排版部分的问题，

主要是解决这个中间部分布局的问题，尝试了很多种方法，最后才解决
明天计划的事情：明天计划完成这个页面
遇到的问题：

      1，在中间这一部分的时候，首先自己采用的办法是采用bootstrap布局中的这个属性

.container

，先用这个定下页面与边框之间的距离，然后使用

col-sm-3

把页面分成4份，因为在bootstrap中规定一行最多有12列，然后在这四个div里面创建了3个小的div，分别用来包含其中的数字，文本内容，以及箭头，最后页面效果是做出来了，但是在进行缩小调试的时候，中间的文字会随着屏幕的缩小而拉长，首先的话我感觉是布局的问题，然后根据开发文档找到了

可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。.

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
            1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
            3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
            1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
            3 of 3
        </div>
    </div>
</div>

根据这个来改动代码，后来又从菜鸟教程上了解到

<div class="container mt-3">
    <h2>Flex</h2>
    <p>使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：</p>
    <div class="d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
    </div>
</div>

最后还是存在或多或少的问题，然后请教了师兄们，发现在开发文档里有

，自己最开始只是设置了一个布局，没有针对不同的页面宽度来调整其大小，最后加上了

col-xl-3 col-sm-6 d-flex

定义了文件在不同设备上的换行才解决问题

收获：通过今天的学习，发现对开发文档的有些部分理解的还不够透彻，没有结合到一块去使用，遇到问题自己很长时间都无法搞定的及时寻求帮助，节省时间。bootstrap框架要多学学才行