引导程序中的 7 个相等的列 [英] 7 equal columns in 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>

我的主要内容有以下类，所以我希望 7 列位于其中:

<块引用>

col-lg-12

谁能解释一下这是否可行，或者我是否必须坚持使用偶数?

解决方案

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

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

<div class="row 7-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>

@media(最小宽度:768px){.seven-cols .col-md-1,.seven-cols .col-sm-1,.seven-cols .col-lg-1 {宽度:100%；*宽度:100%；}}@media(最小宽度:992px){.seven-cols .col-md-1,.seven-cols .col-sm-1,.seven-cols .col-lg-1 {宽度:14.285714285714285714285714285714%；*宽度:14.285714285714285714285714285714%；}}/*** 在这种情况下并不真正需要以下内容* 仅用于演示@media 在大屏幕上的使用*/@media(最小宽度:1200px){.seven-cols .col-md-1,.seven-cols .col-sm-1,.seven-cols .col-lg-1 {宽度:14.285714285714285714285714285714%；*宽度:14.285714285714285714285714285714%；}}

width 的值来自:

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

工作演示 - (jsbin)

运行代码片段并点击完整页面".

.col-md-1 {背景颜色:金色；}@media(最小宽度:768px){.seven-cols .col-md-1,.seven-cols .col-sm-1,.seven-cols .col-lg-1 {宽度:100%；*宽度:100%；}}@media(最小宽度:992px){.seven-cols .col-md-1,.seven-cols .col-sm-1,.seven-cols .col-lg-1 {宽度:14.285714285714285714285714285714%；*宽度:14.285714285714285714285714285714%；}}@media(最小宽度:1200px){.seven-cols .col-md-1,.seven-cols .col-sm-1,.seven-cols .col-lg-1 {宽度:14.285714285714285714285714285714%；*宽度:14.285714285714285714285714285714%；}}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row 7-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>

其他选项

此外，您可以使用自定义构建器(更改@grid-columns，...).

如果您使用 less 编译器，您可以下载 less 版本的 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>

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

col-lg-12

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

解决方案

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 - (jsbin)

Run the code snippet and click on the "Full page".

.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>

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屋！