wake-up-neo.com

Richten Sie zwei divs horizontal nebeneinander mit der Seite mit bootstrap css aus

Bitte beziehen Sie sich auf den Code, den 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 auf der seite ausrichten. Wie kann ich das machen ? Ich möchte nicht einfache CSS und Floating-Konzept verwenden, um dies zu tun. weil ich die bootstrap-css verwenden muss, um in allen Arten von Layouts zu arbeiten (d. h. alle Fenstergrößen und Auflösungen), anstatt die Medienabfrage zu verwenden.

htmlcsstwitter-bootstrap
69
SivaRajini

Das 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 über das Rastersystem der Bootstrap-Dokumente, um sich mit der Funktionsweise von Bootstrap-Rastern vertraut zu machen:

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

144
Billy Moat

Verwenden Sie die Bootstrap-Klassen col-xx-# und col-xx-offset-#.

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

Für xx wird in einer allgemeinen Website md bevorzugt. Wenn Sie möchten, dass Ihr Layout auf einem Mobilgerät gleich aussieht, wird xs 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 tun.

22
Ranveer
<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.

2
Oluwasayo Babalola

Um zwei Divs horizontal auszurichten, müssen Sie nur zwei Klassen von Bootstrap 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>
2
Dev Rathi

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

 Horizontal Align Center 

<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

2
ErTR

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

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

Wenn Sie Ihre Zeit damit vergeudet haben, col-xx-offset-# zu verwenden, wie ich es aufgrund seiner Antwort tat, ist die Lösung offset-xx-#.

0
Michael Novello