使用 Boostrap 3.3.6，我的问题是卡体的内容是动态的，所以高度不会恒定。所以卡片排列不当。根据上图，我希望包 5 应显示在包 1 下，包 8 应移动到包 7 旁边。
HTML 是响应式的。在较小的屏幕上工作正常，但在全屏时遇到问题。
任何帮助将不胜感激，请查看我下面的代码
.card {
background-color: rgba(250, 250, 250, 1); /* off-white */
border-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, .3);
border-radius: 4px;
height: auto;
margin-top: 3rem;
}
.card span {
font-size: 18px;
font-weight: 700;
text-align: center;
}
hr {
height: 1px;
background-color: rgba(0, 0, 0, .2);
}
.card-footer {
position: relative;
bottom: 0px;
margin: 5px;
}
.card-header{
height: 40px;
padding-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 1 </span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 2 </span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 3 </span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 4</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 5</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 6</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 7</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 8</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
</body>
</html>最佳答案
我添加了一个类 row-for-cards 并将显示设置为 flex。这可以作为您的起点，它现在应该按照您的意愿运行。
剩下要做的事情:一些 bootstrap3 类会稍微干扰 flexbox，例如文本向右流动到卡片的边缘。但是完全有可能使布局完全符合您的要求，我只是从头到尾都不知道。我认为您需要向 cols 添加一些 flex-basis 值(与宽度相同的值)。并在移动显示器上设置 flex-basis: 100% 以在移动设备上获得完整的 100% 跨度。
.row-for-cards {
display: flex;
flex-wrap: wrap;
}
.card {
background-color: rgba(250, 250, 250, 1); /* off-white */
border-style: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, .3);
border-radius: 4px;
height: auto;
margin-top: 3rem;
}
.card span {
font-size: 18px;
font-weight: 700;
text-align: center;
}
hr {
height: 1px;
background-color: rgba(0, 0, 0, .2);
}
.card-footer {
position: relative;
bottom: 0px;
margin: 5px;
}
.card-header{
height: 40px;
padding-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="row row-for-cards">
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 1 </span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 2 </span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 3 </span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 4</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 5</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 6</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 7</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="card">
<!-- <div class="row"> -->
<div class="col-12 text-center card-header">
<span>Package 8</span>
</div>
<hr>
<div class="col-12">
<ul>
<li>Description: This is a product.</li>
<li>Price: $1,200</li>
</ul>
</div>
<div class="col-12 card-footer">
<button class="btn btn-danger btn-block ">Add To Cart</button>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
</body>
</html>关于html - 使用 bootstrap 3.3.6 将卡片与动态高度对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57285362/