1. Accueil
  2. Question et réponse
  3. Bootstrap 4 cartes et Navs

Bootstrap 4 cartes et Navs

2017-10-20 32 views
0

J'essaie de mettre ma carte à côté de ma navigation qui est verticale, mais elle décide qu'elle doit être coupée. Alors, comment puis-je réparer cette solution? J'ai passé des heures à essayer de résoudre ce problèmeBootstrap 4 cartes et Navs

travail:

<?php include 'includes/db.php'?> 
 
<html> 
 
\t <head> 
 
\t \t <title>Admin Panel</title> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
\t \t <link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css"> 
 
\t \t 
 
\t \t <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" \t crossorigin="anonymous"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <?php include 'includes/header.php';?> 
 
\t \t 
 
\t \t <div class="col-lg-2"> 
 
\t \t \t <ul class="nav flex-column"> 
 
\t \t \t \t <li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li> 
 
\t \t \t \t <li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a> 
 
\t \t \t \t \t <ul class="collapse" id="new-items"> 
 
\t \t \t \t \t \t <li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li> 
 
\t \t \t \t \t \t <li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li> 
 
\t \t \t \t <li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li> 
 
\t \t \t \t <li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li> 
 
\t \t \t \t <li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <br/> 
 
\t \t <div class="col-lg-8"> 
 
\t \t <div style="width:50px;height:50px;"></div> 
 
\t \t \t <div class="col-md-4"> 
 
\t \t \t \t <div class="card"> 
 
\t \t \t \t \t <div class="card-header"> 
 
\t \t \t \t \t \t <div class="card-block"> 
 
\t \t \t \t \t \t \t <div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div> 
 
\t \t \t \t \t \t \t <div class="col-xs-9 float-right"> 
 
\t \t \t \t \t \t \t \t <div style="font-size:2.5em">20</div> 
 
\t \t \t \t \t \t \t \t <div style="">Posts</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="card-footer"> 
 
\t \t \t \t \t \t \t <div class="float-left">View Posts</div> 
 
\t \t \t \t \t \t \t <div class="float-right"><i class="fa fa-arrow-circle-right"></i></div> 
 
\t \t \t \t \t \t \t <div class="clearfix"></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="card"> 
 
\t \t \t \t \t <div class="card-header"> 
 
\t \t \t \t \t \t <div class="card-block"> 
 
\t \t \t \t \t \t \t <div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div> 
 
\t \t \t \t \t \t \t <div class="col-xs-9 float-right"> 
 
\t \t \t \t \t \t \t \t <div style="font-size:2.5em">20</div> 
 
\t \t \t \t \t \t \t \t <div style="">Posts</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="card-footer"> 
 
\t \t \t \t \t \t \t <div class="float-left">View Posts</div> 
 
\t \t \t \t \t \t \t <div class="float-right"><i class="fa fa-arrow-circle-right"></i></div> 
 
\t \t \t \t \t \t \t <div class="clearfix"></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t \t 
 
\t \t <footer></footer> 
 
\t </body> 
 
</html>

Si quelqu'un peut comprendre cela, il sera grandement apprécié S'il vous plaît noter également que cette est un panneau d'administrateur pour un blog que je fais (Custom CMS) donc si vous avez des idées à ce sujet, je l'apprécierai grandement.

Source

2017-10-20 BubbyColditz

+0

Cela ne ressemble pas à une situation où vous devez utiliser une carte. Avez-vous envisagé d'utiliser des badges à la place: 'Dashboard 20' – David

Répondre

0

Vous pouvez réaliser cela en utilisant des styles flottants css. J'ajoute des classes personnalisées à la fois pour la navigation et les cartes div et j'applique la propriété float: left pour les deux divs. La balise Break (br) est supprimée. Le premier enfant immédiat de la carte est vide, d'où je l'ai fait invisible.

Une autre méthode que vous pouvez utiliser float-left css classes pour obtenir float: left css propriétés dans les deux divs.

Veuillez trouver le code ci-dessous.

<html> 
<head> 
    <title>Admin Panel</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
    <link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css"> 

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 

<style> 
.Cls_navigation,.Cls_card{float:left} 

.Cls_card > div:first-child{display:none;} 

</style> 

</head> 
<body> 
    <?php include 'includes/header.php';?> 

    <div class="col-lg-2 Cls_navigation"> 
     <ul class="nav flex-column"> 
      <li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li> 
      <li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a> 
       <ul class="collapse" id="new-items"> 
        <li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li> 
        <li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li> 
       </ul> 
      </li> 
      <li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li> 
      <li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li> 
      <li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li> 
      <li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li> 
     </ul> 
    </div> 

    <div class="col-lg-8 Cls_card"> 
    <div style="width:50px;height:50px;"></div> 
     <div class="col-md-4"> 
      <div class="card"> 
       <div class="card-header"> 
        <div class="card-block"> 
         <div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div> 
         <div class="col-xs-9 float-right"> 
          <div style="font-size:2.5em">20</div> 
          <div style="">Posts</div> 
         </div> 
        </div> 
       </div> 
       <a href="#"> 
        <div class="card-footer"> 
         <div class="float-left">View Posts</div> 
         <div class="float-right"><i class="fa fa-arrow-circle-right"></i></div> 
         <div class="clearfix"></div> 
        </div> 
       </a> 
      </div> 
      <div class="card"> 
       <div class="card-header"> 
        <div class="card-block"> 
         <div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div> 
         <div class="col-xs-9 float-right"> 
          <div style="font-size:2.5em">20</div> 
          <div style="">Posts</div> 
         </div> 
        </div> 
       </div> 
       <a href="#"> 
        <div class="card-footer"> 
         <div class="float-left">View Posts</div> 
         <div class="float-right"><i class="fa fa-arrow-circle-right"></i></div> 
         <div class="clearfix"></div> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 

    <footer></footer> 
</body>

Source

2017-10-20 18:38:57

+0

Merci beaucoup !! Mais comment pourrais-je faire flotter la case suivante sous mon premier? – BubbyColditz

+0

S'il vous plaît se référer mon code trop –

+0

je voulais dire mes boîtes étant côte à côte car ils sont sous une grande colonne et Cls_card est utilisée pour chacun d'eux. J'ai besoin d'eux côte à côte afin que je puisse continuer avec mon projet – BubbyColditz

 Questions connexes

  • Aucun problème connexe^_^