如何将图像网格放入引导卡

Question

我有一张带有下面图片的引导卡。 我要插入一张图片网格，而不是一张图片。 我将如何进行？ 尝试结合使用会产生带有空白的错位设计

引导卡代码：

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="Card image cap">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

网格图像代码：

<div class="grid-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-gap: 0em;
    padding: 0px;
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

尝试合并会产生带有空白的错位设计：

<div class="card" style="width: 18rem;">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

使用MVC Net Core

其他学习资源： 引导卡未如示例中所示

Answer 1

尝试这个：

的CSS

img {
  width: 49%;
}

或者最好向卡内的所有图像添加自定义CSS类并提供其width: 49%

Codepen工作演示

Answer 2

将列的宽度从100px更改为1fr ，无论.card的宽度如何，它都可以工作

 .card { width:18rem; background: pink; } .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0; padding: 0px; } img { width: 100%; height: auto; padding: 0px; } 

 <div class="card"> <div class="grid-container"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town"> </div> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> 

Answer 3

这是您的解决方案。

 .card { width:18rem; } .grid-container { display: grid; margin:auto; grid-template-columns: auto auto; /* The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. */ } img { width: 100%; height: auto; padding: 0px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="card"> <div class="grid-container"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town"> </div> <div class="card-body"> Some quick example text to build on the card title and make up the bulk of the card's content. </div> </div>