Bootstrap 4 card card-img-bottom 在选项卡窗格内不起作用
Boostrap 4 card card-img-bottom not working inside tab-pane
我对 Bootstrap 4 页卡片内的导航标签有疑问。
我想要做的是在切换 nav-link 选项时同时切换卡片文本和 card-img-bottom。
所以我使用了一个包含要显示的文本和图像的选项卡窗格。
切换适用于文本和图像。并且设置了填充后，图像在卡片中显示时没有左或右填充。
但是，我的问题是我找不到将图像正确对齐到卡片底部的解决方案。
<div class="container-fluid">
<div class="card-deck mb-3 text-center">
<div class="card box-shadow text-center">
<div class="card-header">
<h4 class="my-0 mb-3">Card A</h4>
<ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
</li>
</ul>
</div>
<div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
<div class="tab-pane fade pl-0 pr-0 show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
<h4 class="card-title pl-3 pr-3">Some Text for Option A</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom" src="img/ImageA.jpg">
<!--/.Card image at card bottom-->
</div>
<div class="tab-pane fade pl-0 pr-0" id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
<h4 class="card-title pl-3 pr-3">Some Text for Option B</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom" src="img/ImageB.jpg">
<!--/.Card image at card bottom-->
</div>
<div class="tab-pane fade pl-0 pr-0" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
<h4 class="card-title pl-3 pr-3">Some Text for Option C</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom align-bottom align-img-bottom" src="img/Grey.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
</div>
<div class="card mb-8 box-shadow">
<div class="card-header">
<h4 class="my-0">Card B</h4>
</div>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
This is what it looks with two cards side by side
只需将选项卡面板的内部内容用classes d-flex, flex-wrap包裹在一个div中，并给出图像标签class mt-auto.
试试这个：
查看演示 Here
<div class="container-fluid">
<div class="card-deck mb-3 text-center">
<div class="card box-shadow text-center">
<div class="card-header">
<h4 class="my-0 mb-3">Card A</h4>
<ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
</li>
</ul>
</div>
<div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
<div class="tab-pane fade h-100 show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option A</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
<div class="tab-pane fade h-100 " id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option B</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
<div class="tab-pane fade h-100" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option C</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
</div>
</div>
<div class="card mb-8 box-shadow">
<div class="card-header">
<h4 class="my-0">Card B</h4>
</div>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
我对 Bootstrap 4 页卡片内的导航标签有疑问。 我想要做的是在切换 nav-link 选项时同时切换卡片文本和 card-img-bottom。 所以我使用了一个包含要显示的文本和图像的选项卡窗格。 切换适用于文本和图像。并且设置了填充后，图像在卡片中显示时没有左或右填充。
但是，我的问题是我找不到将图像正确对齐到卡片底部的解决方案。
<div class="container-fluid">
<div class="card-deck mb-3 text-center">
<div class="card box-shadow text-center">
<div class="card-header">
<h4 class="my-0 mb-3">Card A</h4>
<ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
</li>
</ul>
</div>
<div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
<div class="tab-pane fade pl-0 pr-0 show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
<h4 class="card-title pl-3 pr-3">Some Text for Option A</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom" src="img/ImageA.jpg">
<!--/.Card image at card bottom-->
</div>
<div class="tab-pane fade pl-0 pr-0" id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
<h4 class="card-title pl-3 pr-3">Some Text for Option B</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom" src="img/ImageB.jpg">
<!--/.Card image at card bottom-->
</div>
<div class="tab-pane fade pl-0 pr-0" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
<h4 class="card-title pl-3 pr-3">Some Text for Option C</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom align-bottom align-img-bottom" src="img/Grey.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
</div>
<div class="card mb-8 box-shadow">
<div class="card-header">
<h4 class="my-0">Card B</h4>
</div>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
This is what it looks with two cards side by side
只需将选项卡面板的内部内容用classes d-flex, flex-wrap包裹在一个div中，并给出图像标签class mt-auto.
试试这个：
查看演示 Here
<div class="container-fluid">
<div class="card-deck mb-3 text-center">
<div class="card box-shadow text-center">
<div class="card-header">
<h4 class="my-0 mb-3">Card A</h4>
<ul class="nav nav-tabs card-header-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="optionA-tab" data-toggle="tab" href="#optionA" role="tab" aria-controls="optionA" aria-selected="true">Option A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionB-tab" data-toggle="tab" href="#optionB" role="tab" aria-controls="optionB" aria-selected="false">Option B</a>
</li>
<li class="nav-item">
<a class="nav-link" id="optionC-tab" data-toggle="tab" href="#optionC" role="tab" aria-controls="optionC" aria-selected="false">Option C</a>
</li>
</ul>
</div>
<div class="card-body tab-content pl-0 pr-0 pb-0 mb-0">
<div class="tab-pane fade h-100 show active " id="optionA" role="tabpanel" aria-labelledby="optionA-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option A</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
<div class="tab-pane fade h-100 " id="optionB" role="tabpanel" aria-labelledby="optionB-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option B</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
<div class="tab-pane fade h-100" id="optionC" role="tabpanel" aria-labelledby="optionC-tab">
<div class="d-flex flex-wrap h-100">
<h4 class="card-title w-100 pl-2 pr-2">Some Text for Option C</h4>
<!--Card image at card bottom-->
<img class="card-img-bottom mt-auto" src="http://www.freeimageslive.com/galleries/workplace/education/preview/abc.jpg">
<!--/.Card image at card bottom-->
</div>
</div>
</div>
</div>
<div class="card mb-8 box-shadow">
<div class="card-header">
<h4 class="my-0">Card B</h4>
</div>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>