2013-09-02 4 views
0

je l'ai mise en page suivante dans la mise en page fluide bootstrap-Aligner trois divs dans le centre

<div class="container"> 
    <div class="row-fluid"> 
    <div class="span3 offset1"> </div> 
    <div class="span3"> </div> 
    <div class="span3"> </div> 
    </div> 
</div> 

Mon problème est que je veux aligner tous les trois travées parfaitement alignés centre Comme j'utilise la mise en page fluide ... dans plein écran au-dessus de la mise en page est parfaitement aligné centre que j'ai appliqué un décalage fixe pour la première div

Mais comme il devient plus petit en largeur. tous les 3 div ci-dessus ne sont pas parfaitement alignés au centre, car le décalage est fixe.

Je pense que, voici ce qui se passe ..... dans bootstrap nous avons 12 colums, toutes les colonnes occupant 9 spans..remaining sont portées 3 (impair) à cause de ce nombre impair je ne suis pas en mesure de quitter même s'étend des deux côtés .....

est-il une solution pour cela? .....

Répondre

1

les travées de Bootstrap sont flottaient à la gauche. Vous pouvez modifier ce comportement en utilisant ceci:

<div class="container"> 
<div class="span9" style="float: none; margin-left: auto; margin-right: auto"> 
    <div class="row-fluid"> 
     <div class="span4">... </div> 
     <div class="span4">... </div> 
     <div class="span4">... </div> 
    </div> 
</div> 
</div> 
1

Il devrait y avoir une ligne là-dedans.

<div class="container"> 
    <div class="row-fluid"> 
     <div class="span3 offset1"> </div> 
     <div class="span3"> </div> 
     <div class="span3"> </div> 
    </div> 
</div> 

d'une manière non-bootstrap pour résoudre ce:

<div class="container"> 
    <div style="width: 80%; margin: 0 auto;"> 
     <div class="row-fluid"> 
      <div class="span3 offset1"> </div> 
      <div class="span3"> </div> 
      <div class="span3"> </div> 
     </div> 
    </div> 
</div> 

La largeur du nouvel élément peut être max de largeur avec une largeur aswell statique.

+0

maintenant i Ajouté fluide ligne dans ma mise en page ... il a résolu mon problème peu, mais trois travées à l'intérieur ne sont pas parfaitement alignés centre Pouvez-vous aider! – Rohit

+0

C'est parce que si vous utilisez 9 travées, il y aura un décalage vers la gauche et deux vers la droite. Essayez ma nouvelle solution. – Razz

+0

Merci! son fait – Rohit

0

Vous aimez cette

<div class="row-fluid"> 
    <div class="span3 offset1"> </div> 
    <div class="span3"> </div> 
    <div class="span3"> </div> 
</div> 


<div class="container"> 

au lieu de:

<div class="row-fluid"> 

je pense que cliquer sur ce lien ci-dessous en double question

Is it possible to horizontally center align a row of bootstrap spans that don't add up to 12?

+0

Maintenant j'ai ajouté le fluide de ligne dans ma disposition ... il a résolu mon problème peu, mais trois travées à l'intérieur ne sont pas parfaitement alignées au centre Pouvez-vous aider! – Rohit