web-dev-qa-db-fra.com

Alignez deux divs horizontalement côte à côte au centre de la page à l’aide de bootstrap css

S'il vous plaît se référer ci-dessous code ce que j'ai essayé

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

sortie:

First Div
SecondDiv

Production attendue :

                      First Div        Second Div

je veux aligner les deux divs horizontalement au centre de la page en utilisant Bootstrap CSS. Comment puis-je faire ceci ? Je ne veux pas utiliser simple css et concept flottant pour le faire. parce que je dois utiliser le css bootstrap pour fonctionner dans tout type de mise en page (c'est-à-dire toute taille et résolution de fenêtre) au lieu d'utiliser une requête multimédia.

htmlcsstwitter-bootstrap
69
SivaRajini

Cela devrait faire l'affaire:

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

Lisez la section système de la grille de la documentation Bootstrap pour vous familiariser avec le fonctionnement des grilles Bootstrap:

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

144
Billy Moat

Utilisez les classes d'amorçage col-xx-# et col-xx-offset-#

Donc, ce qui se passe ici est que votre écran est divisé en 12 colonnes. Dans col-xx-#, # est le nombre de colonnes que vous couvrez et offset est le nombre de colonnes que vous quittez. 

Pour xx, dans un site Web général, md est préférable et si vous souhaitez que votre présentation ait la même apparence sur un appareil mobile, xs est préférable.

Avec ce que je peux faire de votre exigence,

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

Devrait faire l'affaire.

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>

Cela fait l'affaire.

2
Oluwasayo Babalola

Pour aligner horizontalement deux divs, il suffit de combiner deux classes de Bootstrap:

<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

Solution alternative Bootstrap 4 (de cette façon, vous pouvez utiliser des divs plus petits que col-6):

 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>

Plus

2
ErTR

La réponse fournie par Ranveer (deuxième réponse ci-dessus) ne fonctionne absolument PAS. 

Il dit d'utiliser col-xx-offset-#, mais ce n'est pas ainsi que les compensations sont utilisées. 

Si vous avez perdu votre temps à essayer d'utiliser col-xx-offset-#, comme je l'ai fait d'après sa réponse, la solution consiste à utiliser offset-xx-#.

0
Michael Novello