如何在 Bootstrap 卡中显示多个水平图像？答案

【问题标题】：How to show multiple horizontal images in Bootstrap card?如何在 Bootstrap 卡中显示多个水平图像？
【发布时间】：2019-06-26 13:02:13
【问题描述】：

如何在引导卡中并排放置多个图像？
它应该是多张图片，但只有一个标题标题和描述。
在我的代码中，图像开始相互交叉和相交。

最后，我想使用一组图片（两个或更多）并将它们与 JavaScript 结合起来。
卡片的宽度可以根据需要而定。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="well text-center">
  <div class="row">
    <div class="col-md-6">
      <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo"></a>
    </div>
    <div class="col-md-6">
      <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo"></a>
    </div>
  </div>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="card" style="width: 50rem;">
  <!--Accordion wrapper-->
  <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
    <!-- Accordion card -->
    <div class="card">
      <div cardcheckbox id="checkboxdiv">
        <input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
      </div>
      <div class="well text-center">
        <div class="col-md-12">Sister Properties:</div>
        <div class="row">
          <div class="col-md-6">
            <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo"></a>
          </div>
          <div class="col-md-6">
            <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo"></a>
          </div>
        </div>
      </div>
      <!-- Card header -->
      <div class="card-header" role="tab" id="headingOne1">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
                        Tree
                    </a>
      </div>
      <!-- Card body -->
      <div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
        <div class="card-body">
          Oak Tree with leaves in grassy picture with sunset
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您显示的代码有什么问题？你想要的有什么不同？
既然您使用过col-md-6，图像应该并排显示。您能否更具体地说明您的问题？
图片开始交叉交叉，欢迎尝试
最终当我想出相交的图像时，想要接受来自用户的任意数量的图片，stackoverflow.com/questions/35021144/…

标签： html css twitter-bootstrap

【解决方案1】：

您可能会发现 Bootstrap 的 image-fluid 类很有用。

Bootstrap 中的图像使用.img-fluid 进行响应。
max-width: 100%; 和height: auto; 应用于图像，使其随父元素缩放。
Responsive images

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="well text-center">
  <div class="row">
    <div class="col-md-6">
      <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid"></a>
    </div>
    <div class="col-md-6">
      <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid"></a>
    </div>
  </div>
</div>

这是带有复选框的第二个版本。
您可以考虑使用 max-width 而不是 width 来保持卡片响应。

.card {
  max-width: 50rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="card">
  <!--Accordion wrapper-->
  <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
    <!-- Accordion card -->
    <div class="card">
      <div cardcheckbox id="checkboxdiv">
        <input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
      </div>
      <div class="well text-center">
        <div class="col-md-12">Sister Properties:</div>
        <div class="row">
          <div class="col-md-6">
            <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid"></a>
          </div>
          <div class="col-md-6">
            <a href="#"><img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid"></a>
          </div>
        </div>
      </div>
      <!-- Card header -->
      <div class="card-header" role="tab" id="headingOne1">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
      </div>
      <!-- Card body -->
      <div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
        <div class="card-body">
          Oak Tree with leaves in grassy picture with sunset
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

太好了，只是我的复选框消失了，想弄清楚
我使用了您没有复选框的第一部分代码。我在你的另一个 sn-p 中添加了第二个示例。