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

小编典典

引导程序中有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

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

阅读 334

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