Question

我在Bootstrap 4页面的卡片内部有一个导航标签问题。我想要做的是在切换导航链接选项时，同时切换卡片文本以及卡片img-bottom。所以我使用一个包含要显示的文本和图像的选项卡窗格。切换适用于文本和图像。使用填充设置，图像显示在卡中没有左边或右边填充。

但是，我的问题是我无法找到将图像正确对齐卡片底部的解决方案。

valueOf()

This is what it looks with two cards side by side

Answer 1

只需将标签面板的内部内容包含在一个包含d-flex, flex-wrap类的div中，并为图片标记类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>

Boostrap 4卡片-img-bottom在标签窗格内不起作用

1 个答案: