Schaffung eines ansprechenden Teiler (vertikal/horizontal) in der Bootstrap

Bin ich kämpfen ein bisschen mit der Erstellung eines responsive-Teiler in der Bootstrap. Durch responsive-Teiler meine ich eine Trennlinie, die senkrecht auf großen Bildschirmen und horizontal auf kleineren Bildschirmen.

Vertikale Teiler:

Horizontale divider:

Danke für das hinzufügen von Bilder, deine Frage sieht toll aus.

InformationsquelleAutor darkdark | 2016-04-06

Dies ist ein einfaches Beispiel, wie man eine ansprechende horizontale Linie mit Worten von Bootstrap 4.1

HTML:

<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>

InformationsquelleAutor user3890355

Die Spalten wirklich gleich Höhe, so Flexbox-scheint die optimale

CSS:

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;
}

HTML:

<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>

Codepen-Demo

Es sieht gut aus, aber reagieren nicht.

InformationsquelleAutor Paulie_D

hier arbeiten Demo.

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;}
}

Die equal-height-Eigenschaft display: table-cell funktioniert nicht für Schwimmer.

InformationsquelleAutor Yashpal Sindhav

Gemacht werden, die Verwendung einer Klasse, die sich verändern kann mit media queries. Prüfen Sie diesen link aus, um eine Lösung http://www.bootply.com/cwvl8JaIEi. Es ist im Grunde das, was Sie bereits mit ein paar Ergänzungen wie folgt:

Eine Klasse für die Zeile
media queries

CSS:

.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%
	}
 }

HTML:

<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>

Ich würde annehmen, dass diese Antwort, wenn es nicht für die height:150px; für die .hr element. Nicht sehr allgemein.
Herausforderung angenommen.....Ich habe bearbeitet Sie den obigen code, überprüfen Sie bitte heraus und die neue link
hast du es geschafft zu Recht gekommen mit diesem problem?
Ich habe Ihre zweite link, und es scheint nicht zu funktionieren, wie Gegenaktionen. Ich mochte die Einfachheit Ihrer ersten Lösung. Eine Schande, dass es funktioniert nur mit fester Höhe. Ich bin gonna lassen die Frage offen, bis ich jemand stellt eine gute Lösung. Ich bin mir bewusst, dass 100% der Höhe ist etwas schwierig, aber ich bin immer noch der Hoffnung.

InformationsquelleAutor Sphinx

Die Antwort verschwindet <hr> + verschwinden <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>