Bootstrap 4卡和导航

时间：2017-10-20 17:09:31

标签： html5 twitter-bootstrap

我正在尝试将我的卡放在我垂直的导航旁边，但它决定它需要进入。那么我该如何解决这个问题呢？我花了好几个小时试图解决这个问题

工作：

<?php include 'includes/db.php'?>
<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>
<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" 	crossorigin="anonymous"></script>
	</head>
	<body>
		<?php include 'includes/header.php';?>
		
		<div class="col-lg-2">
			<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>
		<br/>
		<div class="col-lg-8">
		<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>
</html>

如果有人能解决这个问题，我们将非常感激请注意，这是我正在制作的博客（自定义CMS）的管理员面板，所以如果您对此有任何想法，好吧，我将非常感激。

1 个答案:

答案 0 :(得分：0)

你可以通过使用css浮动样式来实现这一点。我为导航和卡片div添加了一个自定义类，并为两个div应用了float：left属性。 Break（br）标签被删除。卡片的第一个孩子是空的，因此我让它变得无形。

另一种方法是你可以使用float-left css类来实现浮动：两个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>

相关问题
最新问题