发表于: 2018-11-18 22:23:43

1 809


今天完成的事情:今天的话主要是该任务10的代码改了很长时间,不过在晚上的时候已经全部改完了,自己测试了3.4遍还没发现什么问题,如图所示明天计划的事情: 明天的计划提交任务10接受任务11
遇到的问题: 

     1,这个问题是昨天其中的内容没办法居中的问题,关于这个问题,首先在今天把bootstrap4的开发文档又重新看了一遍,着重的把布局方面又重新看了一下,对其布局又有了重新的认知。另外关于页面缩小的问题又重新向师兄请教了下,最后达到了这个效果

,代码如下

<div class="container">
   <div class="row">
       <div class="col  txt-two">
           <img src="image/task10-box-one.png" height="15" width="19"/>
           <span>选择箱型</span>
       </div>

   </div>
       <div class="row align-items-center main-box-one ">
           <div class="col">
            <form>
               <label class="radio-inline col-md-12 text-center col-lg-3"><input type="radio" name="optradio">对口箱</label>
               <label class="radio-inline col-md-12 text-center col-lg-3  "><input type="radio" name="optradio">飞机盒</label>
               <label class="radio-inline col-md-12 text-center col-lg-3 "><input type="radio" name="optradio">天地盖</label>
           </form>
           </div>

               <div class="col-sm-12 col-md-12 col-lg-2 text-center select-bg">
                   <select autofocus>
                       <option value="查看详情">查看详情</option>
                       <option value="saab">Saab</option>
                       <option value="opel">Opel</option>
                       <option value="audi">Audi</option>
                   </select>
               </div>


刚开始的话自己的思路是直接在label外面的div里加标签,使其缩小也能达到居中的效果,但后来呢发现自己的思路是错误的,这样的话这是对于这个div居中,但是其中的内容还是不能达到完美的居中的效果,这次的话是直接在label标签上对其样式做修改,最后也达到了目的

收获:   此次的话困了这么久自己感觉主要是对于bootstrap布局方面困惑太大,所以导致停滞了很久。不过今天自己又重新看了遍开发者文档,也是发现了一些自己之前一直忽略的问题,之前学过的还是要及时的回顾复习一下比较好,加深下印象


返回列表 返回列表
评论

    分享到