Richten Sie zwei Divs mithilfe von Bootstrap-CSS horizontal nebeneinander in der Mitte der Seite aus

Bitte beziehen Sie sich auf den folgenden Code, was ich versucht habe

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

Ausgabe :

First Div
SecondDiv

Erwartete Ausgabe :

                      First Div        Second Div

Ich möchte die beiden Divs mit Bootstrap-CSS horizontal mittig zur Seite ausrichten. Wie kann ich das machen ? Ich möchte nicht einfache CSS und Floating-Konzept verwenden, um dies zu tun. weil ich das Bootstrap-CSS verwenden muss, um in allen Arten von Layouts (dh allen Fenstergrößen und Auflösungen) zu arbeiten, anstatt Medienabfragen zu verwenden.

Dies sollte den Trick tun:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

Lesen Sie den Abschnitt zum Rastersystem in den Bootstrap-Dokumenten, um sich mit der Funktionsweise der Raster von Bootstrap vertraut zu machen:

http://getbootstrap.com/css/#grid

Verwenden Sie die Bootstrap-Klassen col-xx-#undcol-xx-offset-#

Was hier passiert, ist, dass Ihr Bildschirm in 12 Spalten unterteilt wird. In col-xx-#,# ist die Anzahl der Spalten , die Sie decken und Offset wird die Anzahl der Spalten , die Sie verlassen.

Denn xxauf einer allgemeinen Website mdwird bevorzugt, und wenn Sie möchten, dass Ihr Layout auf einem mobilen Gerät gleich aussieht, xswird es bevorzugt.

Mit dem, was ich aus Ihrer Anforderung machen kann,

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

Sollte den Trick machen.

Alternative Bootstrap 4-Lösung (auf diese Weise können Sie Divs verwenden, die kleiner als col-6 sind ):

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Mehr

<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

Das macht den Trick.

Um zwei Divs horizontal auszurichten, müssen Sie nur zwei Bootstrap-Klassen kombinieren: So geht's:

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

Die Antwort von Ranveer (zweite Antwort oben) funktioniert absolut NICHT.

Er sagt zu verwenden col-xx-offset-#, aber so werden Offsets nicht verwendet.

Wenn Sie Ihre Zeit damit verschwendet haben col-xx-offset-#, wie ich es aufgrund seiner Antwort getan habe, ist die Lösung die Verwendung offset-xx-#.

Alternative, die ich Angular programmiert habe:

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

Ich empfehle CSS-Raster über Bootstrap, wenn Sie wirklich strukturiertere Daten haben möchten, z. B. eine nebeneinander liegende Tabelle mit mehreren Zeilen, da Sie nicht für jedes Kind einen Klassennamen hinzufügen müssen:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

CSS-Gitter