Bootstrap Col宽度

Question

请先查看附件中的图片

我希望第一列中有20%，但当我使用col-md-2时，它会设置width: 16.6667% 我如何使用bootstrap设置列20%。 我是否需要制作自己的CSS或者有一种方法来自定义bootstraps3

Answer 1

Bootstrap网格系统基于12列。 这里有Bootstrap官方文档http://getbootstrap.com/css/#grid

col-md-2表示您要分配容器总宽度的2/12，因此16.6667％

如果您要分配20％，可以在col-md-2附近添加一个类，然后覆盖宽度，或者设置内嵌样式。 请注意，如果设置20％不是12的倍数，那么近列将永远不会使用bootstrap拉伸100％的宽度。

Answer 2

您必须使用自定义类（简单方法），或自定义Bootstrap网格系统。

要创建自定义类，您可以使用以下内容：

.col-10p {
  width: 100%;
}

.col-20p {
  width: 100%;
}
@media screen and (min-width: 768px) {

 .col-10p {
  width: 10%;
  float: left;
 }

 .col-20p {
  width: 20%;
  float: left;
 }
}

然后你将分别获得10％和20％宽度的容器，并且像col-md- * s一样响应。这些可以像col - * - * classes一样使用。

如果customize引导或覆盖默认网格类，它将影响整个项目，并会产生意想不到的结果。

像这样你可以覆盖类：

.col-md-2 {
  width: 10% !important;
}

由于使用!important不是一种好办法：你可以使用另一种方法：

.width-10.col-md-2 {
   width: 10%;
}

会给你带来理想的效果。只需在HTML中使用width-10类。