lignes et colonnes dans bootstrap 3

-1

Je suis en train de montrer le nom « test » 3 fois de suite et 3 fois dans la deuxième rangée mais il ne me montre les sections dans une rangée horizontalelignes et colonnes dans bootstrap 3

Au lieu de cela, il me montrer tout modèle verticle col ...

<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/styles.css"> 
<title>bootstrap</title>

<div class="services container"> 
    <h2>Services</h2> 
    <div class="row"> 
     <section class="col-md-6 col-md-4"> 
      <img class="icon" src='images/cabbage.png' alt="Icon"> 
      <h3>Vegitables</h3> 
      <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p> 
     </section> 
     <section class="col-md-6 col-md-4"> 
      <img class="icon" src='images/car.png' alt="Icon"> 
      <h3>Cars</h3> 
      <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p> 
     </section> 
     <section class="col-md-6 col-md-4"> 
      <img class="icon" src='images/clothes.png' alt="Icon"> 
      <h3>clothss</h3> 
      <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p> 
     </section> 
    </div> 
    <div class="row"> 
     <section class="col-md-6 col-md-4"> 
      <img class="icon" src='images/motorcycle.png' alt="Icon"> 
      <h3>Motorcycle</h3> 
      <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p> 
     </section> 
     <section class="col-md-6 col-md-4"> 
      <img class="icon" src='images/pet-icon.png' alt="Icon"> 
      <h3>Pets</h3> 
      <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p> 
     </section> 
     <section class="col-md-6 col-md-4"> 
      <img class="icon" src='images/phone.png' alt="Icon"> 
      <h3>Phone</h3> 
      <p> 
        Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. 
      </p> 
     </section> 
    </div> 
</div> 


<script src="js/jquery-3.2.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/script.js"></script>

//my css code 

    .icon{ 
     max-width: 150px; 
     margin: 0 auto; 
     display: block; 
    } 
    .service section{ 
     text-align: center; 
    }

comment ce code fonctionnera. s'il y a des corrections ou des suggestions, répondez-moi.

Source

2017-09-27 Akshay Deshpande

Le système de quadrillage bootstrap nécessite ses styles css.

Essayez de mettre les éléments suivants dans votre balise <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Votre code semble bien, il devrait fonctionner après cela.

Source

2017-09-27 21:02:16 Chanzi

mais il faudra PRs d'en ligne, mais je veux importer de css hors ligne. donc qu'est ce que je devrais faire?? –

Si vous n'êtes pas intéressé par l'utilisation d'un réseau de diffusion de contenu (tout à fait correct), vous pouvez apporter Bootstrap localement en le téléchargeant [ici] (http://getbootstrap.com/docs/4.0/getting-started/download/) . Après cela, il suffit de définir votre chemin href pour pointer vers où se trouve le CSS de votre bootstrap. Si vous cherchez une option plus avancée, vous pouvez également chercher à l'importer avec NPM, ce qui améliorera votre expérience de développement. Pour l'instant cependant, je pense que vous serez d'accord avec le téléchargement de bootstrap localement. – Chanzi

Notez que le lien ci-dessus est pour Bootstrap 4. Si vous cherchez Bootstrap 3, que vous utilisiez dans votre code ci-dessus, cliquez sur [ici] (https://getbootstrap.com/docs/3.3/). – Chanzi

Votre code semble correct, vous avez juste besoin de gérer pour plusieurs résolutions d'écran, avec l'extrait ci-dessous j'ai ajouté col-xs-4 qui me permet de rendre mon système de grille sur des écrans plus petits, checkout bootstrap système options here qui devrait vous aider

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container">//main container 
 
      <h2>Services</h2> 
 
      <div class="row">//1st row 
 
       <section class="col-xs-4 col-md-4 col-md-6"> 
 
        <h2>Test</h2> 
 
       </section> 
 
       <section class="col-xs-4 col-md-4 col-md-6"> 
 
        <h2>Test</h2> 
 
       </section> 
 
       <section class="col-xs-4 col-md-4 col-md-6"> 
 
        <h2>Test</h2> 
 
       </section> 
 
      </div> 
 
      <div class="row">//2nd row 
 
       <section class="col-md-4"> 
 
        <h2>Test</h2> 
 
       </section> 
 
       <section class="col-md-4"> 
 
        <h2>Test</h2> 
 
       </section> 
 
       <section class="col-md-4"> 
 
        <h2>Test</h2> 
 
       </section> 
 
      </div> 
 
     </div>

Source

2017-09-28 01:55:21

J'ai importer ce fichier hors ligne ... mais il ne fonctionne toujours pas ... –

@AkshayDeshpande mais avec le «extrait de code d'exécution» son travail à droite? parce que je viens de le faire localement et il fonctionne –

ouais ... tq son travail maintenant –

lignes et colonnes dans bootstrap 3

Répondre

Questions connexes