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

Question

我在Bootstrap中创建一个响应式分频器时有点挣扎。通过响应分频器，我指的是一个分隔线，它在大屏幕上是垂直的，在较小的屏幕上是水平的。

垂直分隔线：

水平分隔符：

我进行了一些实验，并提出了无效功能：

<div class="row>
    <div class="col-md-5">
        <h2>Lorem ipsum</h2>
        <p>blah blach hery asd
  ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d<br>asd ads asd da da da  dada
        </p>
    </div>
    <div class="col-md-2">
        &nbsp;
        <div class="sep">
            <div class="sepText">
                OR
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <h2>Lorem lorem</h2>
        <p>ok ok ok</p>
    </div>
</div>

和css：

.sep {
    width: 1px;
    background: #cccccc;
    margin: 0 0 0 -1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
}

.sepText {
    width: 75px;
    height: 18px;
    background: #ffffff;
    margin: -15px 0 0 -50px;
    padding: 5px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 18px;
    text-align: center;
}

Answer 1

这是一个简单的示例，说明如何通过Bootstrap 4.1用文字制作响应式水平线

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <hr class="my-auto flex-grow-1">
  <div class="px-4">SOME TEXT HERE</div>
  <hr class="my-auto flex-grow-1">
</div>

Answer 2

列确实必须是相同的高度，因此Flexbox似乎是最佳的

＆＃13;

＆＃13;

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
}
.sep {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sepText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.sepText::before,
.sepText::after {
  content: '';
  flex: 1;
  width: 1px;
  background: currentColor;
  /* matches font color */
  margin: .25em;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-5">
      <h2>Lorem ipsum</h2>
      <p>blah blach hery asd ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d
        <br>asd ads asd da da da dada
      </p>
    </div>
    <div class="col-sm-2 sep">
      <span class="sepText">
                      OR
                  </span>

    </div>
    <div class="col-sm-5">
      <h2>Lorem lorem</h2>
      <p>ok ok ok</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen Demo

Answer 3

这必须使用可以随媒体查询更改的类来完成。请检查此链接以获取解决方案http://www.bootply.com/cwvl8JaIEi。它基本上是你已经添加了一些内容如下：

1. 该行的类
2. 媒体查询
＆＃13;
＆＃13;
.sepText {
    background: #ffffff;
    margin: -15px 0 0 -38px;
    padding: 5px 0;
    position: absolute;
    left: 43%;
    text-align: center;
}
hr{-webkit-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
    -ms-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
    transform: translate(-45px, -11px) rotate(90deg) scale(0.8);}

@media only screen and (max-width: 999px) {
   hr{
       -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }
   .sepText {
    left: 50%;
    top:50%
	}
 }
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-5">
                <h2>Lorem ipsum</h2>
                <p>blah blach hery asd
  ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d<br>asd ads asd da da da  dada
                </p>
        </div>
        <div class="col-md-2">
            
            <div class="sep">
                <hr><div class="sepText">
                    OR
                </div>
            </div>
         
        </div>
        <div class="col-md-5">
                <h2>Lorem lorem</h2>
                <p>ok ok ok</p>
        </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

这是工作演示。

<强> HTML

<div class="row">
    <div class="col-sm-5"><h2>lorem Ipsum</h2><p>lorem ipsum dummt text is here for you</p></div>
    <div class="col-sm-2 seprator_class">
        <div class="sep">
           <div class="sep-text">
               or
           </div>
        </div>
    </div>
    <div class="col-sm-5"><h2>lorem Ipsum</h2><p>lorem ipsum dummt text is here for you</p>
    </div>
</div>

<强> CSS

.seprator_class {position: relative;}
.sep {position: absolute; left:50%; top:0; bottom:0; width: 1px; background:#ccc; display:table; height:100%;}
.sep-text { display:table-cell; vertical-align:middle; background: #fff; padding: 5px;}

@media screen and (max-width: 768px) {
    .sep {position: absolute; left:0; top:50%; bottom:auto; right:0 width: 100%; background:#ccc; display:block; height: 1px; text-align:center;}
.sep-text { display:inline-block;}
}

Answer 5

答案消失了<hr> +消失了<div> + margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

在Bootstrap 4.1上测试

Answer 6

这是一个无限数量的单元格的代码笔：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>