在 Bootstrap 中创建响应式分隔线（垂直/水平）

Question

我在 Bootstrap 中创建响应式分隔线时有些吃力。我所说的响应式分隔器是指在大屏幕上是垂直的，在小屏幕上是水平的。

垂直分隔线：

水平分隔线：

原文由 darkdark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是无限数量的单元格的代码笔： https ://codepen.io/pg-dev/pen/vYyKEaN

代码：

 var detectWrap = function(className) {

  var midLine = [];
  var lastLine = [];
  var lastColItems = [];
  var prevItem = null;
  var item = null;
  var items = document.getElementsByClassName(className);

  for (const [pos, item] of Object.entries(items)) {
    if (prevItem != null &&
        prevItem.getBoundingClientRect().top < item.getBoundingClientRect().top) {


      lastColItems.push(prevItem)


      midLine.push(...lastLine)
      lastLine = []

    }

    //Suppose this is the last line, if not (detect a new line) then move last to mid
    lastLine.push(item)

    if (parseInt(pos, 0) === items.length - 1) {
      lastColItems.push(item)
    }

    prevItem = item;
  };

  return {
    "mid": midLine,
    "last": lastLine,
    "last-item": lastColItems
  };
}

function grid() {
  var wrappedItems = detectWrap("item");
  var items = document.getElementsByClassName("item");

  for ([key, item] of Object.entries(items)) {
    item.classList.remove("last-item-of-line")
    item.classList.remove("last-line")
    item.classList.add("line")
  }

  for ([key, item] of Object.entries( wrappedItems["last"])) {
    item.classList.add("last-line")
  }
  for ([key, item] of Object.entries(wrappedItems["last-item"])) {
    item.classList.add("last-item-of-line")
  }
}

window.onresize = function(event){
  grid();
};

//when document ready
document.addEventListener('DOMContentLoaded', function() {
   grid();
});

 body {
  background: grey;
}

div  {
  display: flex;
  flex-wrap: wrap;
}

div > div {
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  background-color: #222222;
  padding: 20px 0px;
  color: #FFFFFF;
  font-family: Arial;
  min-width: 250px;
}

div > div.wrapped {
  background-color: red;
}

.line {
  border-top: none;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
  border-left: none;
}

.last-item-of-line {
  border-right: none !important;
}

.last-line {
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid white;
}

 <div>
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
</div>

原文由 Taknok 发布，翻译遵循 CC BY-SA 4.0 许可协议