栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

引导程序中有7个相等的列

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

引导程序中有7个相等的列

好吧,IMO,您可能需要

width
使用CSS3
@media
查询来覆盖列的。

这是我创建7列网格系统的尝试:

<div >  <div >    <div >Col 1</div>    <div >Col 2</div>    <div >Col 3</div>    <div >Col 4</div>    <div >Col 5</div>    <div >Col 6</div>    <div >Col 7</div>  </div></div>@media (min-width: 768px){  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1  {    width: 100%;    *width: 100%;  }}@media (min-width: 992px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}    @media (min-width: 1200px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}

的价值

width
来自:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

工作演示-

运行代码段,然后单击“整页”。

.col-md-1 {  background-color: gold;}@media (min-width: 768px){  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1  {    width: 100%;    *width: 100%;  }}@media (min-width: 992px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}@media (min-width: 1200px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/><div >  <div >    <div >Col 1</div>    <div >Col 2</div>    <div >Col 3</div>    <div >Col 4</div>    <div >Col 5</div>    <div >Col 6</div>    <div >Col 7</div>  </div></div>

其他选择

另外,您可以使用“ 自定义生成器” 来构建自己的7列版本的Twitter Bootstrap (更改

@grid-columns
,…)。

如果使用 较少的 编译器,则可以下载_较低_版本的TwitterBootstrap(从Github)并编辑该

variables.less
文件。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/635223.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号