Question

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

最终，我想使用一组图片（两张或更多张）并将它们与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>

Answer 1

问题可能是因为您没有限制图像尺寸。尝试此操作或对图像使用.img-fluid类。

body {
  margin: 2em;
}

img {
  max-width: 100%;
}

<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>

编辑1 Link to your full solution here

Answer 2

您可能会发现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>

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

2 个答案: