小编典典

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

html

我想知道是否有人可以解释如何在引导程序中获得7个相等的列?我想做一个日历。此代码似乎可以执行5:

div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

我的主要内容有以下课程,所以我希望将7列放在其中:

Col-lg-12

谁能解释这是否可能,或者我是否必须坚持偶数?


阅读 335

收藏
2020-05-10

共1个答案

小编典典

好吧,IMO,您可能需要width使用CSS3 @media查询来覆盖列的。

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

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">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%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@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 class="container">

  <div class="row seven-cols">

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

    <div class="col-md-1">Col 2</div>

    <div class="col-md-1">Col 3</div>

    <div class="col-md-1">Col 4</div>

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

    <div class="col-md-1">Col 6</div>

    <div class="col-md-1">Col 7</div>

  </div>

</div>

其他选择

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

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

2020-05-10