Bootstrap 4 个文档示例在 CodePen 上不起作用

Question

例如this code does not work as can be demonstrated by this pen。切换到 Bootstrap 3 并将 offset-{breakpoint}-* 更改为 col-{breakpoint}-offset-* 似乎可行。这是为什么？

Answer 1

使用 Bootstrap 4.0 beta2 - 因为他们只在这个版本中带回了偏移列：
https://codepen.io/svitch/pen/xPVaZw

.row > div {
  background-color: #ccc;
  outline: 2px solid #777;
  outline-offset: -1px;
}

.row > .col, .row > [class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Bootstrap 4 个文档示例在 CodePen 上不起作用

Bootstrap 4 docs examples don't work on CodePen

twitter-bootstrap

codepen