如何在引导卡中的图像旁边放置文本（列表）？

Question

我急需帮助。我于 2016 年在 Muse 建立了一个网站，当然他们将其关闭，但现在即使订阅了我也无法打开我的文件，所以我必须转换的最后一页很大，有 120 多个图像，旁边有一个小文本列表。我主要使用 bootstrap 和 html 来尝试重新制作它，但我似乎无法获得彼此相邻的图像和列表。搜索这个地方后，我发现了下面的代码，但无论我多么混乱它。请帮忙。最后，每张卡片都需要链接到一个个人简介页面。 这样你就可以看到我正在尝试重新编码的内容： 这是我需要重新制作客户列表的页面

<div class="card w-50">
    <div class="card-img-top d-flex align-items-center bg-light">
        <div>
            <img src="images/headshots/actor-Headshot.jpg" alt="actor headshot"        class="img-fluid">
        </div>
        <h5 class="card-title">Card title</h5>
        <div class="card-header">
            actor
        </div>
            <div class="card" style="width: 18rem;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Star Wars Saga</li>
                    <li class="list-group-item">Indiana Jones</li>
                    <li class="list-group-item">Blade Runner</li>
                    <li class="list-group-item">Witness</li>
                    <li class="list-group-item">Star Wars: The Force Awakens</li>
                </ul>
            </div>
            </div>

Answer 1

我假设您想要图像右侧的列表，因此这可能就是您所需要的。

<div class="card">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="images/headshots/actor-Headshot.jpg" alt="actor headshot">
    </div>
    <div class="col-md-8">
      <div class="card-header">
         Actor
      </div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <ul class="list-group list-group-flush">
           <li class="list-group-item">Star Wars Saga</li>
           <li class="list-group-item">Indiana Jones</li>
           <li class="list-group-item">Blade Runner</li>
           <li class="list-group-item">Witness</li>
           <li class="list-group-item">Star Wars: The Force Awakens</li>
        </ul>
      </div>
    </div>
  </div>
</div>

您可能不需要使用

w-50

，请改用

col-12 col-md-6

。这样您将在移动设备上拥有一张

full-width

卡，在其他屏幕尺寸上拥有一张

half-width

卡。

希望有帮助；）