图像图像在顶部/左侧的引导卡，取决于列断点？答案

【问题标题】：Bootstrap card whose image image is top/left, depending on column breakpoint?图像图像在顶部/左侧的引导卡，取决于列断点？
【发布时间】：2019-04-15 06:12:58
【问题描述】：

大多数带有图像的 Bootstrap 4 cards 要么具有 .card-img-top，要么使用附加/自定义代码将图像转移到其他位置，例如左侧。

是否有单张卡片的代码，其图像可能位于主体顶部或主体左侧，具体取决于宽度？

见下文，我目前的两种不同的卡类型...

应用了 .card-img-top 后，前一个更加标准。
但是，在我的网站上的某些情况下，我需要一种更水平的方法，左侧的图像不是使用.card-img-top，而是使用两个额外的列并排实现。您还可以在图片中看到这一点。

现在，我必须编写单独的代码来执行此操作 - 一种卡片类型用于垂直，另一种用于水平。

所以我很好奇 - 我可以有一张卡片，其图像位于顶部或左侧，具体取决于包含它的列的大小？

我正在努力考虑，不过... 在浏览器xs 和sm 中，所有列都是12 列并且需要垂直卡片。但是在浏览器md 和lg 中，列宽会根据标记需要而变化，如图所示。

这是否可以使用单卡代码来实现，还是有比这更复杂的逻辑？

仅供参考...

这是我的垂直卡片的代码...

采访

<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark">Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/paidcontent/" class="text-muted">paidContent</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark">Interview: Digital’s Second Age Begins Now, FT CEO Says</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/moconews/" class="text-muted">moconews</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark">Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/moconews/" class="text-muted">moconews</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->

这是我正在为水平样式卡片尝试的代码...

<p><strong>Interviews</strong></p>

<div class="row">





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
                                              <img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>


                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark">Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch</a></h6>
                                              <img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/paidcontent/" class="text-muted">paidContent</a></span>




                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark">Interview: Digital’s Second Age Begins Now, FT CEO Says</a></h6>
                                              <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/moconews/" class="text-muted">moconews</a></span>





                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark">Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’</a></h6>
                                              <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/moconews/" class="text-muted">moconews</a></span>





                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->
          </div>




</div>

（我正在努力使图像“覆盖”样式，以填充可用空间。垂直卡片上的图像应保持横向，水平卡片上的图像应为方形。注意 - 我的水平卡片代码目前存在问题，当右侧的文本比左侧图像长时，它会在左侧图像下方引入边框/边距。）

【问题讨论】：

标签： css twitter-bootstrap responsive-design bootstrap-4

【解决方案1】：

如果我正确理解了您的问题（阅读时间较长：）），您可以使用flex-direction 属性。

我为你做了一个简单的例子。首先，列是一个接一个（水平），里面的内容是一样的。

然后在所需的断点 (600px) 之后，我使列具有列方向。

您也可以使用引导类，并且可能会得到相同的结果。

见下面的 sn-p 或jsFiddle

.col-4 {
  flex-direction: row;
  display: flex;
}

@media only screen and (max-width: 600px) {
  .col-4 {
    flex-direction: column;
  }
}

<div class="row">
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
</div>

【讨论】：

也许似乎有点工作。我需要在列内放置一个.card。而且我实际上不清楚col-* 类和@media 东西之间的相互作用。 IE。我目前的垂直卡片占用col-xs-12 col-sm-6 col-md-6 col-lg-3，那我该怎么办？