Bootstrap栅格系统8等分

2020-02-11  本文已影响0人  橙赎

关于bootstrap大家都知道栅格系统是12等分,今天做项目时发现有一版块是8张图片等分,通过查资料得知只能写css代码实现,现博客记录代码

8等分

html

<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>
<div class="col-md-1-8"></div>

css

.col-md-1-8{
  min-height: 1px;
  padding-left: 12px;
  padding-right: 12px;
  position: relative;
  width: 12.5%;
  float: left;
}

同理可得5等分

html

<div class="col-md-1-5"></div>
<div class="col-md-1-5"></div>
<div class="col-md-1-5"></div>
<div class="col-md-1-5"></div>
<div class="col-md-1-5"></div>

css

.col-md-1-5{
  min-height: 1px;
  padding-left: 12px;
  padding-right: 12px;
  position: relative;
  width: 20%;
  float: left;
}
上一篇 下一篇

猜你喜欢

热点阅读