css - 将 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 个不同的类，或者是否可以更改第一个使用的 .col-md-2 类，然后在我后来的集成 css 文件中更改第二个，因为这个类在不同的 css id 中。 我尝试创建 2 个自己的 col-md 类，但这没有用。

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

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

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

total witdh现在会太长，但我应该和以前一样，因为我在第一类上加了6%，在第二类上减去6%。

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

Answer 1

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

例如:

.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 宽度。检测您的需求并应用更改。