少于 12 列的 bootstrap 3.0 网格 [英] bootstrap 3.0 grid with less than 12 columns

问题描述

我正在尝试使用只有 7 列的网格创建日历.我想让这 7 列均匀分布并适合整行.目前，7 列加起来不等于 12，我得到 12 列，其中 5 列是空的.Bootstrap 3 中是否有办法让所有 7 项都分布在一行中?

解决方案

最好的办法可能是创建自己的自定义列类.由于您想要一个跨越其父级宽度 1/7 的列，请使用 width:14.285%;(100 除以 7 = 14.285...).

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

CSS

.col-day{宽度:14.285%；边框:1px 纯灰色；向左飘浮;位置:相对；最小高度:1px；padding-right: 15px;左边距:15px；}

HTML

<div class="row bg-success"><div class="col-day">Sun</div><div class="col-day">周一</div><div class="col-day">周二</div><div class="col-day">周三</div><div class="col-day">Th</div><div class="col-day">Fr</div><div class="col-day">周六</div><div class="col-day">Sun</div><div class="col-day">周一</div><div class="col-day">周二</div><div class="col-day">周三</div><div class="col-day">Th</div><div class="col-day">Fr</div><div class="col-day">周六</div>

在 CSS 部分，float、position、min-height 和 paddings 与任何其他 bootstrap col-class 相同.宽度和边框是唯一真正自定义的方面.但是您还需要考虑在不同尺寸的设备上会发生什么 - 此解决方案不像组合 col-classes 那样响应......

I am trying to create a calendar using the grid with only 7 columns. I would like to have these 7 columns evenly spaced and fit the entire row. Currently, the 7 columns does not add up to 12 and I get 12 columns with 5 empty. Is there a way in Bootstrap 3 to get all 7 spread across the row?

解决方案

Your best bet is probably to create your own custom column class. Since you want a colum that spans 1/7th the width of it's parent, use width:14.285%; (100 divided by 7 = 14.285...).

DEMO: 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>

In the CSS section, float, position, min-height and the paddings are the same as any other bootstrap col-class. Width and border are the only truly custom aspects. But you'll also want to consider what happens on different sized devices - this solution is NOT responsive the way combined col-classes are...

这篇关于少于 12 列的 bootstrap 3.0 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！