如何使用引导程序将卡片右侧的内容放置在图像下方？答案

【问题标题】：How to get content on the right of a card to position under the image using bootstrap?如何使用引导程序将卡片右侧的内容放置在图像下方？
【发布时间】：2020-09-19 02:52:15
【问题描述】：

我无法使用引导程序和 CSS 将卡片中图像右侧的内容置于图像下方。我曾尝试在网上和引导文档中寻找解决方案，但我找不到任何可以解决我的问题的方法。当我低于某个响应大小时，我只想将 AppName、Description 和 AppDescription 放置在图像下方。感谢您的帮助。

下面的HTML

    <div class="card">
        <div class="row no-gutters">
           <div class="col-auto col-md-6">
               <img src="img/image.jpg" class="img-fluid image" alt="PayCloud App Demo" width="620" height="465">
           </div>
           <div class="col">
             <div class="card-block px-2">
                <p class="card-title AppName">AppName</p>
                <p class="card-title Description">Restaurant Payment Service - January 2020</p>
                <p class="card-text AppDescription">App Description.</p>
                <a href="link.html"><span class="button">View Project</span></a>
             </div>
          </div>
       </div>
</div>

CSS 下面

.AppName{
    font-family: itc-avant-garde-gothic-pro,sans-serif; /* ITC Bold */ 
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    margin-top: 10%;
    margin-bottom: 0;
    text-align: left;
    font-size: 42px;
    width: 50%;
    margin-left: 5%;
    opacity: 80%;
}

.Description{
    color: #869FC9;
    width: 60%;
    margin-left: 5%;
    margin-top: 0;
    margin-bottom: 5%;
}

.AppDescription{
    opacity: 87%;
    width: 90%;
    margin: auto;
    font-family: realist, sans-serif;
    font-weight: 400;   
    font-style: normal;
    font-size: 18px;
    margin-bottom: 2%;
}

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 frontend

【解决方案1】：

您要搜索的是@media (CSS) 更多信息请继续阅读this。

【讨论】：

我知道媒体查询是什么，但我仍然不能让它做我想做的事。
使图像宽度：100%；（在@media ...内），这最终会迫使你的形象接下来发生什么......
我知道出了什么问题，不过感谢您的帮助。
你能和大家分享一下问题是什么吗？如果其他人遇到同样的问题，也许会得到帮助。

【解决方案2】：

我通过将“col”更改为“col-auto”并在类中添加“col-md-6”来修复它

代码如下

<div class="card">
        <div class="row no-gutters">
           <div class="col-auto col-md-6">
               <img src="img/image.jpg" class="img-fluid image" alt="PayCloud App Demo" width="620" height="465">
           </div>
           <div class="col-auto col-md-6">
             <div class="card-block px-2">
                <p class="card-title AppName">AppName</p>
                <p class="card-title Description">Restaurant Payment Service - January 2020</p>
                <p class="card-text AppDescription">App Description.</p>
                <a href="link.html"><span class="button">View Project</span></a>
             </div>
          </div>
       </div>
</div>

【讨论】：

【解决方案3】：

Bootstrap 有一个水平卡片的例子，当它达到一定尺寸时，图像会在顶部。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">AppName</h5>
        <p class="card-text">Restaurant Payment Service - January 2020</p>
        <p class="card-text AppDescription">App Description.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

【讨论】：