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）的管理員面板，因此如果您對此有任何想法，我將不勝感激。

來源

2017-10-20 BubbyColditz

這看起來並不像一個情況下，你應該使用一個卡。你有沒有考慮用徽章代替：'Dashboard 20' – David

你可以通過使用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>

來源

2017-10-20 18:38:57

非常感謝你！但是我怎麼能把我的第一個盒子放在下一個盒子裏？ – BubbyColditz

請參考我的代碼太 –

我的意思是我的箱子是肩並肩，因爲它們是在一個大專欄和Cls_card被用於所有這些。我需要他們並肩作戰，所以我可以繼續我的項目 – BubbyColditz

Bootstrap 4卡和導航

回答

相關問題