1. Accueil
  2. Question et réponse
  3. Problème d'espaces verticaux avec Bootstrap

Problème d'espaces verticaux avec Bootstrap

2016-08-21 1 views
0

J'essaie de concevoir une interface utilisateur similaire à Google Keep et j'utilise bootstrap avec material design.Problème d'espaces verticaux avec Bootstrap

J'ai divisé le contenu en 3 colonnes, mais beaucoup d'espace vertical parasite est ajouté entre les cartes. Comment puis-je l'enlever?

Voici mon code (view output on JSBin) -

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Vertical Space Issue</title> 
    <!-- Material Design fonts --> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons"> 

    <!-- Bootstrap and Material Design --> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" rel="stylesheet"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.iife.js"></script> 

</head> 

<body style="background-color: #00BCD4;"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis. 
          <br /> Ea harum facere, non reiciendis nemo amet voluptatem at.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis Enim ad sint non eum error perferendis, culpa, dicta </p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis. 
           <br /> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis. 
           <br> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

Source

2016-08-21 dufferZafar

+0

Utilisez le [plugin maçonnerie] (http://masonry.desandro.com/) pour le faire de façon moins de tracas .. espérons que cela pourrait être utile .. profiter :) Merci –

+0

qui ne regarde utile. Je vais regarder. – dufferZafar

Répondre

 Questions connexes

  • Aucun problème connexe^_^