Question

考虑以下示例

<html>
<head>
</head>
<body>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
</body>
</html>

是否有更简洁的方式来写这个，如下所示。我不明白为什么必须在内联指定引导网格规则

<html>
<head>
   <style>
      .div-alpha
      {
         col-xs:12;
         col-sm:12;
         col-md:4;
         col-lg:4;
         offset-md:4;
         offset-lg:4;
      }
   </style>
</head>
<body>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
</body>
</html>

Answer 1

我认为我们不能在CSS中的类中包含类，如果您可以尝试使用javascript来执行此操作，请查看以下代码

var classes = "col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"
$('body').children('div').each(function () {
    $(this).addClass(classes);
});

Answer 2

Bootstrap只是一个框架;你可以根据自己的意愿自由适应。只需将Bootstrap为其选择器提供的样式应用到您自己的样式中，您就可以进行修改以适应。

Bootstrap的col-选择器只是在给定断点处对元素应用不同的样式。

col-xs-与 max-width: 768px 相关（仅影响手机）。
.col-sm-与min-width: 768px相关联。
.col-md-与min-width: 992px相关联。
.col-lg-与min-width: 1200px相关联。

请注意as of Bootstrap 3，他们使用mobile-first design，因此媒体查询的顺序非常重要（由于相等specificity）！始终从最小媒体查询开始，然后将向上工作到最大的媒体查询（类似于术语＆＃39;移动优先＆＃39;）。

您可以制作自己的媒体查询以提供与Bootstrap相同的效果，同时通过组合各自的类中的各种Bootstrap逻辑类来减少所需的HTML：

＆＃13;

/* Purely for visibilty */
.div-alpha {
  height: 100px;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

.row {
  margin-left: 15px;
  margin-right: 15px;
}

.row::after, .row::before {
  display: table;
  content: " ";
}

.row::after {
    clear: both;  
}

*::after, *::before {
  box-sizing: border-box;
}

.div-alpha {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

/* .col-xs- */
@media (max-width: 768px) {
  .div-alpha {
    width:  100%;
  }
}

/* .col-sm- */
@media (min-width: 768px) {
  .div-alpha {
    width:  66.66666666%;
  }
}

/* .col-md- */
@media (min-width: 992px) {
  .div-alpha {
    width:  50%;
  }
}

/* .col-lg- */
@media (min-width: 1200px) {
  .div-alpha {
    width:  33.33333333%;
  }
}

＆＃13;

<div class="row">
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
  <div class="div-alpha"></div>
</div>

＆＃13;

在上面，我应用了核心＆＃39; row和独立.div-alpha的引导逻辑。然后我使用媒体查询来控制它如何适应各种不同的宽度（不需要Bootstrap）。其中一个JSFiddle是 available here 。

希望这有帮助！：）

使用内联以外的方式定义bootstrap col-md - **

2 个答案: