Wyrównaj dwa elementy div poziomo obok siebie na środku strony, używając bootstrap css

Proszę zapoznać się z poniższym kodem, co próbowałem

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

wynik :

First Div
SecondDiv

Oczekiwany wynik :

                      First Div        Second Div

Chcę wyrównać dwa elementy div w poziomie, wyśrodkowane na stronie, używając css bootstrap. jak mogę to zrobić ? Nie chcę do tego używać prostego CSS i pływającej koncepcji. ponieważ muszę skorzystać z css bootstrap do pracy we wszelkiego rodzaju układach (tj. wszystkie rozmiary i rozdzielczości okna) zamiast używania zapytania o media.

To powinno załatwić sprawę:

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

Przeczytaj sekcję dotyczącą systemu grid w dokumentacji Bootstrap, aby zapoznać się ze sposobem działania siatek Bootstrap:

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

Użyj klas ładowania początkowego col-xx-#icol-xx-offset-#

Więc to, co się tutaj dzieje, to dzielenie ekranu na 12 kolumn. W col-xx-#, #to liczba kolumn, które zajmujesz, a przesunięcie to liczba kolumn, które opuszczasz.

W xxprzypadku ogólnej witryny internetowej mdjest to preferowane i jeśli chcesz, aby układ wyglądał tak samo na urządzeniu mobilnym, xsjest preferowany.

Z tym, co mogę zrobić z twoich wymagań,

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

Powinien załatwić sprawę.

Alternatywne rozwiązanie Bootstrap 4 (w ten sposób możesz użyć elementów div, które są mniejsze niż col-6 ):

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

Jeszcze

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

To załatwia sprawę.

Aby wyrównać dwa elementy div w poziomie, wystarczy połączyć dwie klasy Bootstrap: Oto jak:

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

Odpowiedź udzielona przez Ranveera (druga odpowiedź powyżej) absolutnie NIE działa.

Mówi, żeby używać col-xx-offset-#, ale nie tak używa się offsetów.

Jeśli zmarnowałeś czas próbując użyć col-xx-offset-#, tak jak ja na podstawie jego odpowiedzi, rozwiązaniem jest użycie offset-xx-#.

Alternatywa, którą zrobiłem programując Angular:

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

Polecam siatkę css zamiast bootstrap, jeśli naprawdę chcesz mieć bardziej uporządkowane dane, np. Tabelę obok siebie z wieloma wierszami, ponieważ nie musisz dodawać nazwy klasy dla każdego dziecka:

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