Bootstrap Flexbox 将 div 对齐到 div 的底部会阻止其他 div 对齐
Bootstrap Flexbox align div to bottom of div stops other divs from aligning
我正在尝试使用弹性框将 div 对齐到 parent div 的底部。我希望 footer-bottom
在每张卡片的底部对齐。我试过使用 align-self: end;
这行得通,但这会阻止标题对齐。参见 js fiddle
我知道 bootstrap 4 有一种方法可以通过使用默认的卡片语法来执行此操作,但我需要在每张卡片中包含列,以便在移动设备上使用。
有人能帮帮我吗?
<div class="mb-4 col-lg-4 normal-article">
<article class="card">
<div class="row no-gutters">
<div class="col-md-3 col-lg-12 order-12 order-md-1">
<div class="mobile-display">
<div class="card-img-top thumbnail" style="background-image:url('http://skeleton-theme.local/wp-content/uploads/2017/09/ukmr-_0022_talk-of-the-town-318x179.jpg')">
</div>
<div class="d-md-none">
<p>Social shifts over the last decade have increased the pressure to live in well connected centres of population. </p>
</div>
</div>
</div>
<div class="order-1 order-md-12 col-md-9 col-lg-12">
<div class="card-body">
<div class="entry-meta">
<span class="cat-links"> <a href="http://skeleton-theme.local/category/south-east/" rel="category tag">South East</a></span><span class="d-none edit-link"><a class="post-edit-link" href="http://skeleton-theme.local/wp-admin/post.php?post=3433&action=edit">Edit <span class="screen-reader-text">"Talk of the Town"</span></a></span> </div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://skeleton-theme.local/talk-of-the-town/" rel="bookmark">Talk of the Town</a></h2>
</header><!-- .entry-header -->
</div><!-- .card-body -->
</div>
<div class="order-12 col-12 footer-bottom">
<div class="card-footer">
<small class="text-muted"><span class="posted-on">Posted on <a href="http://skeleton-theme.local/talk-of-the-town/" rel="bookmark"><time class="entry-date published" datetime="2017-09-14T15:00:44+00:00">14/09/2017</time></a></span></small>
</div>
</div>
</div>
</article>
</div>
好的,这就是我解决这个问题的方法。
- 将 css
flex-direction: column;
添加到您的 .no-gutters
css 规则中
- 你的
no-gutters
div有3child仁。在第一个和第二个 child 上,添加 flex: 1;
或任何基于你想要给两个 div 的比例的值,在第三个 child(footer-bottom) 添加 flex: 0 auto;
我正在尝试使用弹性框将 div 对齐到 parent div 的底部。我希望 footer-bottom
在每张卡片的底部对齐。我试过使用 align-self: end;
这行得通,但这会阻止标题对齐。参见 js fiddle
我知道 bootstrap 4 有一种方法可以通过使用默认的卡片语法来执行此操作,但我需要在每张卡片中包含列,以便在移动设备上使用。
有人能帮帮我吗?
<div class="mb-4 col-lg-4 normal-article">
<article class="card">
<div class="row no-gutters">
<div class="col-md-3 col-lg-12 order-12 order-md-1">
<div class="mobile-display">
<div class="card-img-top thumbnail" style="background-image:url('http://skeleton-theme.local/wp-content/uploads/2017/09/ukmr-_0022_talk-of-the-town-318x179.jpg')">
</div>
<div class="d-md-none">
<p>Social shifts over the last decade have increased the pressure to live in well connected centres of population. </p>
</div>
</div>
</div>
<div class="order-1 order-md-12 col-md-9 col-lg-12">
<div class="card-body">
<div class="entry-meta">
<span class="cat-links"> <a href="http://skeleton-theme.local/category/south-east/" rel="category tag">South East</a></span><span class="d-none edit-link"><a class="post-edit-link" href="http://skeleton-theme.local/wp-admin/post.php?post=3433&action=edit">Edit <span class="screen-reader-text">"Talk of the Town"</span></a></span> </div>
<header class="entry-header">
<h2 class="entry-title"><a href="http://skeleton-theme.local/talk-of-the-town/" rel="bookmark">Talk of the Town</a></h2>
</header><!-- .entry-header -->
</div><!-- .card-body -->
</div>
<div class="order-12 col-12 footer-bottom">
<div class="card-footer">
<small class="text-muted"><span class="posted-on">Posted on <a href="http://skeleton-theme.local/talk-of-the-town/" rel="bookmark"><time class="entry-date published" datetime="2017-09-14T15:00:44+00:00">14/09/2017</time></a></span></small>
</div>
</div>
</div>
</article>
</div>
好的,这就是我解决这个问题的方法。
- 将 css
flex-direction: column;
添加到您的.no-gutters
css 规则中 - 你的
no-gutters
div有3child仁。在第一个和第二个 child 上,添加flex: 1;
或任何基于你想要给两个 div 的比例的值,在第三个 child(footer-bottom) 添加flex: 0 auto;