1. ホーム
  2. 質問と答え
  3. ブートストラップ4カードとナビ

ブートストラップ4カードとナビ

2017-10-20 12 views
0

私は自分のカードを縦になっているナビゲーションの横に置こうとしていますが、それは下に行く必要があると判断します。どうすればこのソリューションを修正できますか？誰もがこれを理解できれば、非常にも、このことに注意してくださいが理解されるであろうブートストラップ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

+0

これは、あなたがカードを使用する必要がある状況のようには見えません。代わりにバッジを使用することを検討しましたか？Dashboard 20 – David

答えて

0

cssフローティングスタイルを使用すると、これを達成できます。ナビゲーションとカードdivの両方にカスタムクラスを追加し、両方のdivのfloat：leftプロパティを適用します。ブレーク（br）タグは削除されます。すぐにカードの最初の子が空になるので、私はそれを不可視にしました。

もう1つの方法として、浮動小数点数の浮動小数点数のためのfloat-left cssクラスを使用できます。両方のdivのleft 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

+0

ありがとうございます！しかし、私はどのように私の最初の下に次のボックスを浮かべることができますか？ – BubbyColditz

+0

参照してください私のコード私は、彼らが下にあるので、私のボックスが並んでいるもので、あまりにも –

+0

1つの大きな列とCls_cardがすべてそれらのために使用されています。私はそれらを並べて、私は私のプロジェクトを続けることができるので、 – BubbyColditz

関連する問題

 関連する問題