引导中有7个相等的列 [英] 7 equal columns in bootstrap

问题描述

我想知道是否有人可以解释如何在bootstrap中获得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> 
  

任何人都可以解释这是否可能， p>

James

编辑：我的主要内容有以下类，所以我想要7列：

col-lg-12

解决方案

好吧，你可能需要通过使用CSS3来替换 width 列 @media 查询。

这是我尝试创建一个7-col网格系统：

 < div class =container> 
< div class =row seven-cols> 
< div class =col-md-1>栏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>栏5< / div> 
< div class =col-md-1>栏6< / div> 
< div class =col-md-1> Col 7< / div> 
< / div> 
< / div> 
  

  @media -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，
。 cols .col-sm-1，
 .seven-cols .col-lg-1 {
 width：14.285714285714285714285714285714％; 
 * width：14.285714285714285714285714285714％; 
} 
} 
 
 / ** 
 *在这种情况下不是真正需要以下内容
 *只是为了演示@media for large的用法screen 
 * / 
 @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％; 
} 
} 
  

/ code>来自：

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

演示示范

其他选项

此外，您可以构建自己的7列版本通过使用 自定义构建器 （更改 @

如果您使用较少编译器，您可以下载 版本的Twitter Bootstrap（来自 Github ）和修改 variables.less 文件。

I was wondering if anyone could explain how I can get 7 equal columns in bootstrap? I am trying to make a calendar. This code seems to do 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>

Can anyone explain if this is possible, or if I have to stick to even numbers instead?

James

EDIT: My main content has the following class, so I would like the 7 columns to sit within this:

col-lg-12

解决方案

Well, IMO you probably need to override the width of the columns by using CSS3 @media query.

Here is my attempt to create a 7-col grid system:

<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%;
  }
}

The value of width comes from:

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

WORKING DEMO

Other options

Also, you could build your own 7-columns version of Twitter Bootstrap by using the Custom Builder (Changing the @grid-columns, ...).

If you are using less compiler, you could download the less version of Twitter Bootstrap (from Github) and edit the variables.less file instead.

这篇关于引导中有7个相等的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！