Bootstrap 4卡和导航
问题描述：
我试图把我的卡放在我的垂直导航旁边，但它决定它需要下。那么我该如何解决这个问题呢？我已经花了几个小时就试图解决这一问题Bootstrap 4卡和导航
工作：
<?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>如果任何人都可以算出来，这将是极大的赞赏也请注意，这是我正在制作的博客（自定义CMS）的管理员面板，因此如果您对此有任何想法，我将不胜感激。
答
你可以通过使用CSS浮动风格来实现这一点。我为导航和卡片div添加自定义类，并为两个div应用float：left属性。中断（br）标记被删除。卡片的直接第一个孩子是空的，因此我使它看不见。
另一种可以使用float-left css类来实现float的另一种方法：在两个div中都使用左css属性。
请找到下面的代码。
<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>
+0
非常感谢你！但是我怎么能把我的第一个盒子放在下一个盒子里？ – BubbyColditz
+0
请参考我的代码太 –
+0
我的意思是我的箱子是肩并肩，因为它们是在一个大专栏和Cls_card被用于所有这些。我需要他们并肩作战，所以我可以继续我的项目 – BubbyColditz
这看起来并不像一个情况下，你应该使用一个卡。你有没有考虑用徽章代替：'Dashboard 20' – David