我希望UL能够将每个项目推到容器的底部。我有margin-top：为项目自动设置但它不起作用。我有另一个可用的演示，但这是我需要使用的。有帮助吗？
.featured-products-carousel {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0 auto;
max-width: 1150px;
width: 80%;
}
.featured-products-carousel .item {
background-color: white;
padding: 20px;
align-items: stretch;
display: flex;
flex-direction: column;
margin: 10px;
padding: 0;
flex: 1 1 auto;
flex-wrap: wrap;
}
.featured-products-carousel .item h2 {
text-align: center;
padding: 8px 5px;
}
.featured-products-carousel .item .featured-product-description {
margin-bottom: auto;
}
.featured-products-carousel .item .featured-products-links {
margin-top: auto;
}
.featured-products-carousel .item ul {
margin-top: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featured-products-carousel" role="listbox">
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
</div>
答案 0 :(得分：4)
父元素不是display: flex;，即使您已指定，因为还有另一条规则用display: block!important;覆盖它。
display: block!important来自第6636行的bootstrap.css，另一行来自第6554行。
.featured-products-carousel {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0 auto;
max-width: 1150px;
width: 80%;
}
.featured-products-carousel .item {
background-color: white;
padding: 20px;
align-items: stretch;
display: flex!important;
flex-direction: column;
margin: 10px;
padding: 0;
flex: 1 1 auto;
flex-wrap: wrap;
}
.featured-products-carousel .item h2 {
text-align: center;
padding: 8px 5px;
}
.featured-products-carousel .item .featured-product-description {
margin-bottom: auto;
}
.featured-products-carousel .item .featured-products-links {
margin-top: auto;
}
.featured-products-carousel .item ul {
margin-top: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featured-products-carousel" role="listbox">
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
<div class="item active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
<span class="h2-span">
<h2 class="h2-height"> [product-id] </h2>
</span>
<div class="product-image">
<a href="/products/[[product-id]]">
<img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
</a>
</div>
<p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
<ul class="list-unstyled">
<li>
<a href="/products/[product-id]">
More About [product-id] »
</a>
</li>
<li>
<a href="[product-id].pdf">Datasheet</a>
</li>
</ul>
</div>
</div>