源代码：
下载代码
AI 编程工具
点击运行
<!DOCTYPE html> <html> <head> <title>Bootstrap实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.6.1/css/bootstrap.min.css"> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/2.11.2/umd/popper.min.js"></script> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>水平卡片</h2> <p>使用.no-gutters移除网格间距，并使用.col-md-*类在md屏幕断点处将卡片设置为水平排列:</p> <div class="card mb-3" style="max-width: 540px;"> <div class="row no-gutters"> <div class="col-md-4"><img src="https://static.jyshare.com/images/mix/img_avatar.png" class="card-img" alt="..."></div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </body> </html>
运行结果：
AI 编程工具