好吧,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文件。



