将 Bootstrap 网格更改为 16,67+66,67+20,67

Question

我正在使用 Bootstrap 以获得更好的移动设计。

我正在使用这个网格模型：

.col-md-2（导航栏）.col-md-8（内容）- col-md-2（右栏）具有以下宽度尺寸：

16.66666667 % + 66.66666667 % + 16.66666667 %

但我想将 .col-md-2 更改为 2 种不同的尺寸，例如 10.66666667 + 22.66666667，所以我会有 2 个不同的 classes，或者是否可以更改第一个使用的 .col-md-2 class，然后是我后来整合的 css-文件，因为这个 classes 在不同的 css id 中。我试图创建 2 个自己的 col-md classes，但这不起作用。

我在第二个加载的 css 文件中的解决方案（不正确）

#menu.col-md-2 {width:22.66666667%;}

#rechts.col-md-2 {width:10.66666667%;}

总的witdh现在太长了，但我应该和以前一样，因为我在第一个class上加了6%，在第二个class上减了6%。

我想更改尺寸，第一列是 10 英寸平板电脑的缩写。

Answer 1

我总是建议不要更改标准 Bootstrap class 宽度。创建你自己的......顺便说一下，你为什么需要这样的东西？ 10.6666 离 col-md-1 很近，为什么不使用它呢？ Pherapse 您可以获得良好的结果，而无需创建自定义 classes，而只需使用边距和填充即可。

Answer 2

我建议您创建两个不同的类并根据需要应用它们。

例如：

.col-md-2.specialCol1 {
// Special size
}
.col-md-2.specialCol2 {
// Special size 2 
}

你明白我的意思吗？

编辑

我建议你使用这个顺序：

.col-md-3 (navigation bar) .col-md-7 (content)- col-md-2 (right column)

要专注于内容。

然后，使用媒体查询进行适配，例如:

@media screen and (max-width: 640px) {
  .yourCol {
    // Your size
  }
}

以上示例适用于 640px 宽度。检测您需要的内容并应用更改。

将 Bootstrap 网格更改为 16,67+66,67+20,67

Change Bootstrap grid to 16,67+66,67+20,67

css

twitter-bootstrap-3

grid-layout

编辑