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

现在总的来说很长，但我应该像以前一样，因为我在第一堂课增加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宽度下应用。检测您需要的内容并应用更改。

Answer 2

我总是建议不要更改标准的Bootstrap类宽度。创造你自己的...顺便说一句，为什么你需要这样的东西？ 10.6666真的在col-md-1附近，为什么不用呢？ Pherapse你可以获得一个好的结果，而不需要创建自定义的withs类，而只需使用边距和填充。

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

2 个答案:

修改