Bootstrap 4 colonnes mal disposées

J'ai une grille Bootstrap 4 qui a une colonne de 9 unités et une colonne de 3 unités, mais la colonne de 9 unités n'occupe pas les 3/4 de la largeur de la page comme il se doit .Bootstrap 4 colonnes mal disposées

Le html ressemble à ceci:

.features-image2 { 
 
    max-width: 140px; 
 
    min-width: 140px; 
 
    width: 140px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="services" class="container-fluid text-center"> 
 
    <div class="row text-center"> 
 
    <div class="col-sm-9 "> 
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-off logo-small"></span> 
 
      <h4>POWER</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-heart logo-small"></span> 
 
      <h4>LOVE</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-lock logo-small"></span> 
 
      <h4>JOB DONE</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     </div> 
 
     <br><br> 
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-leaf logo-small"></span> 
 
      <h4>GREEN</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-certificate logo-small"></span> 
 
      <h4>CERTIFIED</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-wrench logo-small"></span> 
 
      <h4 style="color:#303030;">HARD WORK</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3 "> 
 
     <img class="col-sm-3 features-image2" src="http://placehold.it/140x140"> 
 
    </div> 
 
    </div> 
 
</div>

L'écran ressemble à ceci (la table doit prendre 9 colonnes 3/4 de la largeur de l'écran, mais il ne fonctionne pas):

l'effet que je suis en train de réaliser est de centrer la table et l'image à la fois verticalement et horizontalement dans le col-3

Source

2017-05-17 Bill Noble

au lieu de 'col-sm-3' utiliser' col' seulement il couvrira automatiquement la largeur restante. Cependant, dans 'col-sm-9' vous devriez avoir' col-sm-4' pour couvrir toute la largeur. Depuis son fait le nombre de colonnes égal à 12. –

également ajouter 'align-items-center' à la ligne parente pour définir le contenu interne aligner verticalement centre –

Il y a quelques problèmes avec votre mise en page ...

Utilisez 3 col-sm-4 à consommer un tiers du col-sm-9
Ne pas utiliser la classe col-sm-12 sur l'image
utilisation FlexBox et min-hauteur sur le récipient pour centrer verticalement
changement col-sm-9-col-sm-8 offset-sm-1 pour centrer horizontalement (en option)

Démohttp://www.codeply.com/go/DbV50b96vz

<div id="services" class="container-fluid text-center d-flex"> 
    <div class="row text-center w-100 align-items-center"> 
    <div class="col-sm-8 offset-sm-1"> 
     <div class="row"> 
     <div class="col-sm-4"> 
      <span class="glyphicon glyphicon-off logo-small"></span> 
      <h4>POWER</h4> 
      <p>Lorem ipsum dolor sit amet..</p> 
     </div> 
     <div class="col-sm-4"> 
      <span class="glyphicon glyphicon-heart logo-small"></span> 
      <h4>LOVE</h4> 
      <p>Lorem ipsum dolor sit amet..</p> 
     </div> 
     <div class="col-sm-4"> 
      <span class="glyphicon glyphicon-lock logo-small"></span> 
      <h4>JOB DONE</h4> 
      <p>Lorem ipsum dolor sit amet..</p> 
     </div> 
     </div> 
     <br><br> 
     <div class="row"> 
     <div class="col-sm-4"> 
      <span class="glyphicon glyphicon-leaf logo-small"></span> 
      <h4>GREEN</h4> 
      <p>Lorem ipsum dolor sit amet..</p> 
     </div> 
     <div class="col-sm-4"> 
      <span class="glyphicon glyphicon-certificate logo-small"></span> 
      <h4>CERTIFIED</h4> 
      <p>Lorem ipsum dolor sit amet..</p> 
     </div> 
     <div class="col-sm-4"> 
      <span class="glyphicon glyphicon-wrench logo-small"></span> 
      <h4 style="color:#303030;">HARD WORK</h4> 
      <p>Lorem ipsum dolor sit amet..</p> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-2 text-center"> 
     <img class="features-image2" src="//placehold.it/500x800"> 
    </div> 
    </div> 
</div>

Source

2017-05-17 12:21:38 ZimSystem

Merci ZimSystem qui est parfait. –

De rien. – ZimSystem

Il y a quelques problèmes avec votre mise en œuvre:

1er: pourquoi avez-vous mis ces
balises? ils sont inutiles
2ème: I pense qu'il est préférable de faire de l'image une image de fond du bloc, pas il suffit de le mettre à l'intérieur.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; 
 
.features-image2 { 
 
    /*max-width: 140px; 
 
    min-width: 140px; 
 
    width: 140px;*/ 
 
} 
 

 
.block-left{ 
 
    height: 500px; 
 
    background: red; 
 
} 
 

 
.block-right{ 
 
    height: 500px; 
 
    background: blue; 
 
    background-image: url("https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UY317_CR31,0,214,317_AL_.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<div id="services" class="container-fluid text-center"> 
 
    <div class="row text-center"> 
 
    <div class="col-sm-9 block-left"> 
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-off logo-small"></span> 
 
      <h4>POWER</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-heart logo-small"></span> 
 
      <h4>LOVE</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-lock logo-small"></span> 
 
      <h4>JOB DONE</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-leaf logo-small"></span> 
 
      <h4>GREEN</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-certificate logo-small"></span> 
 
      <h4>CERTIFIED</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <span class="glyphicon glyphicon-wrench logo-small"></span> 
 
      <h4 style="color:#303030;">HARD WORK</h4> 
 
      <p>Lorem ipsum dolor sit amet..</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3 block-right"> 
 
     
 
    </div>

Source

2017-05-17 12:26:28 margarita

Bootstrap 4 colonnes mal disposées

Répondre

Questions connexes