twitter-bootstrap-3 – 少于12列的bootstrap 3.0网格

发布时间：2020-12-17 21:33:43 所属栏目：安全来源：网络整理

导读：我正在尝试使用仅有7列的网格创建日历.我希望这7列均匀分布并适合整行.目前,7列不添加12列,我得到12列,其中5列为空. Bootstrap 3中是否有一种方法可以将所有7个分布在整行中？解决方法您最好的选择可能是创建自己的自定义列类.因为你想要一个跨越其父级宽

我正在尝试使用仅有7列的网格创建日历.我希望这7列均匀分布并适合整行.目前,7列不添加12列,我得到12列,其中5列为空. Bootstrap 3中是否有一种方法可以将所有7个分布在整行中？

解决方法

您最好的选择可能是创建自己的自定义列类.因为你想要一个跨越其父级宽度的1/7的柱子,所以使用宽度：14.285％; (100除以7 = 14.285 ……).

演示：http://www.bootply.com/uakh14tkuX

CSS

.col-day{
    width:14.285%;
    border:1px solid grey;
    float:left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

HTML

<div class="container">
  <div class="row bg-success">
    <div class="col-day">Sun</div>
    <div class="col-day">Mon</div>
    <div class="col-day">Tue</div>
    <div class="col-day">Wed</div>
    <div class="col-day">Th</div>
    <div class="col-day">Fr</div>
    <div class="col-day">Sat</div>
    <div class="col-day">Sun</div>
    <div class="col-day">Mon</div>
    <div class="col-day">Tue</div>
    <div class="col-day">Wed</div>
    <div class="col-day">Th</div>
    <div class="col-day">Fr</div>
    <div class="col-day">Sat</div>
  </div>
</div>

在CSS部分中,float,position,min-height和paddings与任何其他bootstrap col-class相同.宽度和边框是唯一真正的自定义方面.但是你也想考虑在不同大小的设备上发生了什么 – 这个解决方案没有响应组合col-classes的方式……

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!