Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
为什么从 javascript 中的表单输入中检索到的值返回空值或 null 值？
记录问题变量会返回在下拉列表中选择的选项，但记录深度变量不会返回任何内容。 记录问题变量会返回在下拉列表中选择的选项，但记录深度变量不会返回任何内容。 <body> <form class="card p-4" method="POST" id="form"> <label for="problem_selector">Problem</label> <select id="problem_selector" class="form-control" name="problem_name"> <option value="3and5multiples.php">Multiples of 3 and 5</option><br> <option value="even_fibonacci.php">Even fibonacci numbers</option><br> </select> <label for="depth_input">Depth</label> <input id="depth_input" class="form-control" name="depth_input">test</input> <input id="submit_button" value = "submit" type="button" class="btn btn-primary"/> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> let problem = document.getElementById("problem_selector").value; let depth = document.getElementById("depth_input").value; const button = document.getElementById("submit_button"); button.addEventListener('click', function() { console.log(depth); console.log(problem); }); </script> 单击提交按钮时截取的屏幕截图。 按下按钮后，深度值应与问题值一起记录。 我已经将提交按钮更改为输入按钮，但这似乎没有帮助。以前返回的值为 null；但现在该值只是空的。 读取按钮值的代码在页面加载时立即运行。单击按钮后您需要读取值： const button = document.getElementById("submit_button"); button.addEventListener('click', function() { let problem = document.getElementById("problem_selector").value; let depth = document.getElementById("depth_input").value; console.log(depth); console.log(problem); });
在此代码段中，“按日期”行分为两行，第一行是“最近的第一行”，第二行是“最早的第一行”。 我使用 .list-inline 尝试将项目强制到一行......
我正在使用 bootstrap 在 asp.net 中工作。我想验证密码字段。当用户单击密码字段时，我的代码显示信息框。 需要密码... 我正在使用 bootstrap 在 asp.net 中工作。我想验证密码字段。当用户单击密码字段时，我的代码显示信息框。 <div id="pswd_info"> <h4>Password requirements:</h4> <ul> <li id="letter" class="invalid fa-warning"> At least <strong>one letter</strong></li> <li id="capital" class="invalid"> At least <strong>one capital letter</strong></li> <li id="number" class="invalid"> At least <strong>one number</strong></li> <li id="special" class="invalid"> At least <strong>one special character</strong></li> <li id="length" class="invalid"> Be at least <strong>8 characters</strong></li> </ul> </div> javascript <!-- password info box--> <script> $(document).ready(function () { $('#password').keyup(function () { // set password variable var pswd = $(this).val(); //validate the length if (pswd.length < 8) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); } //validate letter if (pswd.match(/[A-z]/)) { $('#letter').removeClass('invalid').addClass('valid'); } else { $('#letter').removeClass('valid').addClass('invalid'); } //validate capital letter if (pswd.match(/[A-Z]/)) { $('#capital').removeClass('invalid').addClass('valid'); } else { $('#capital').removeClass('valid').addClass('invalid'); } //validate number if (pswd.match(/\d/)) { $('#number').removeClass('invalid').addClass('valid'); } else { $('#number').removeClass('valid').addClass('invalid'); } //validate special character if (pswd.match(/[!@#$ %^&*]/)){ $('#special').removeClass('invalid').addClass('valid'); } else { $('#special').removeClass('valid').addClass('invalid'); } }); $('#password').focus(function () { $('#pswd_info').show(); }); $('#password').blur(function () { $('#pswd_info').hide(); }); }); </script> 上面的代码只是显示信息框并根据用户输入更改每个 li。但是，仍然接受任何不符合标准的密码。如何验证#password 字段？我已经有了下面的脚本来验证其他字段 JavaScript <script> // initialize the validator function validator.message.date = 'not a real date'; // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup': $('form') .on('blur', 'input[required], input.optional, select.required', validator.checkField) .on('change', 'select.required', validator.checkField) .on('keypress', 'input[required][pattern]', validator.keypress); $('.multi.required').on('keyup blur', 'input', function() { validator.checkField.apply($(this).siblings().last()[0]); }); $('form').submit(function(e) { e.preventDefault(); var submit = true; // evaluate the form using generic validaing if (!validator.checkAll($(this))) { submit = false; } if (submit) this.submit(); return false; }); </script> 最少八个字符，至少一个字母和一个数字： "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" 最少八个字符，至少一个字母、一个数字和一个特殊字符： "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" 最少八个字符，至少一个大写字母，一个小写字母和一个数字： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" 最少 8 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" 最少 8 个、最多 10 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符： "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,10}" 您可以编写简单的这一行来检查所有内容： <input type="password" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
我正在做一个考试项目。 我刚刚才注意到，网页严重依赖的动画 GIF 不会根据容器或窗口宽度调整大小。我是你...
在此代码段中，“按日期”行分为两行，第一行是“最近的第一行”，第二行是“最早的第一行”。 我使用 .list-inline 尝试将项目强制到一行......
我有元素侧边栏和div，带有粘性顶部类： .... ... 我有元素侧边栏和 div 类 sticky-top: <div class="row"> <div class="col-lg-4"> <div class="sticky-top"> .... </div> </div> </div> 当侧边栏粘性时，我需要传递一个边距，因为类粘性顶部没有边距顶部。 侧边栏粘滞时如何书写边距？ 尝试： .sticky-top { top: 0.5em; } 您需要使用 top 而不是 margin-top <div class="row"> <div class="col-lg-4"> <div class="sticky-top" style="top: 30px"> .... </div> </div> </div> 尝试使用： .sticky-top{ margin-top:10px; } 如果它给你带来麻烦，你可以用!important强制它，就像这样： .sticky-top{ margin-top:10px !important; } 请注意，仅当其他解决方案不起作用时才应使用 !important。 希望有帮助！ 为了提高响应能力，您可以使用 [class*="sticky-"] { top: 1rem; } 以便它可以适用于所有响应式变体。即 sticky-md-top、sticky-lg-top 等
我正在尝试像这样覆盖引导类导航栏品牌的左边距 .navbar .navbar-品牌{ 左边距：15px； 背景： url("../img/logo.png") 无重复； } 基本的东西正确...
如何更改引导滑块按钮颜色？ 如何更改引导滑块按钮颜色？ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8 col-md-12 col-sm-12"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script> 您可以创建如下规则： .carousel-control-prev-icon { color: blue; background-color: green; } .carousel-control-prev-icon { color: blue; background-color: green; } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8 col-md-12 col-sm-12"> <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> <div class="carousel-item active"> <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4> <div class="client-info d-flex my-5"> <div class="img rounded-circle mx-3"> <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt=""> </div> <div class="info"> <h5>Jenny Wilson</h5> <p>Vice President</p> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
我想在桌面模式下的第二个和第三个下拉菜单中添加更多选项，但列表太长。如何设置 y 轴滚动？ 演示 /* 导航栏 ===================================*/ nav.navbar.boo...
我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为位置：固定。整个吐司部分如下所示： 我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为 postion: fixed。整个吐司部分是这样的： <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div> 您可以在 this JSFiddle 中找到完整的工作代码。 该作品按原样工作得很好，但现在我想将 toast 的宽度设置为视口的 50% 左右。在 <div id="toastContainer"...> 行中，我尝试设置 width 属性： <div id="toastContainer" style="position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 或者我尝试设置left： <div id="toastContainer" style="position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 但在这两种情况下，出现的 toast 的 width 都不会改变（仅其水平 position）。 如何设置 Bootstrap 4 toast 的宽度？ 我找到了办法。它也有帮助，它在网站上，我可以直接在上面尝试东西，让事情变得更容易。 我不知道你是否熟悉 bootstrap 但是有这样的东西可以让你通过将 class="col-x" （x 在 1-12 之间）的东西放入 a 中来“控制”东西的长度div 与 class="row"。 <div class="row"> <button type="button" class="btn btn-primary col-8" id="liveToastBtn">Toast it</button> </div> 正如你所看到的，这就是我所做的，只需在按钮的类中添加 col-8 即可，你可以更改它，但我发现 6 看起来不像 50% 8 更接近。 然后你需要一些CSS来使按钮居中: .row{ display:flex; justify-content:center; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶
我有与此类似的 HTML： 公告 我有与此类似的 HTML： <div class="table-responsive"> <table class="table borderless"> <caption> <h3>Announcements</h3> </caption> <tbody> <tr > <td> If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc. </td> </tr> </tbody> </table> </div> 当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？ 只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的 <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> 因此您可以使用以下内容： td { white-space: normal !important; // To consider whitespace. } 如果这不起作用： td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } 我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是因为它消除了包装约束以获得滚动条的完整表格。 colspan 一定是把它绊倒了。 <style> @media (max-width: 768px) { /* use the max to specify at each container level */ .specifictd { width:360px; /* adjust to desired wrapping */ display:table; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } 我希望这有帮助 该行为是故意的： 通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。 这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用 .table-responsive 类。 如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为 white-space: nowrap，这会导致其不会中断。 TL;博士;解决方案 只需从 html 代码中删除 .table-responsive 元素/类即可。 编辑 我认为你的桌子一开始没有响应的原因是你没有包装像这样的 .container、.row 和 .col-md-x 类 <div class="container"> <div class="row"> <div class="col-md-12"> <!-- or use any other number .col-md- --> <div class="table-responsive"> <div class="table"> </div> </div> </div> </div> </div> 有了这个，您仍然可以使用 <p> 标签，甚至使其响应。 请参阅 Bootply 示例此处 UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。 style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;" .table td.abbreviation { max-width: 30px; } .table td.abbreviation p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table class="table"> <tr> <td class="abbreviation"><p>ABC DEF</p></td> </tr> </table> 那么好吧。您可以使用 CSS 自动换行属性。像这样的东西： td.test /* Give whatever class name you want */ { width:11em; /* Give whatever width you want */ word-wrap:break-word; } 在 css 外部文件中使用它。 .td-table { word-wrap: break-word; word-break: break-all; white-space: normal !important; text-align: justify; } 就这样做 style="word-wrap: break-word min-width:; max-width:;" 然后设置你想要的width 在 Bootstrap 5.0 中这样做： <td class="w-50 text-break">teeeeeeeeeeeeeeest</> 您可以根据文档使用w-25或其他东西 在 bootstrap 5 及以上版本中： 2024 年 3 月 5 日 下午 4:20 文字现在可以正常换行。 使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码 $(".tableresp").on('click', '.dropdown-toggle', function(event) { if ($('.dropdown-menu').length) { var elm = $('.dropdown-menu'), docHeight = $(document).height(), docWidth = $(document).width(), btn_offset = $(this).offset(), btn_width = $(this).outerWidth(), btn_height = $(this).outerHeight(), elm_width = elm.outerWidth(), elm_height = elm.outerHeight(), table_offset = $(".tableresp").offset(), table_width = $(".tableresp").width(), table_height = $(".tableresp").height(), tableoffright = table_width + table_offset.left, tableoffbottom = table_height + table_offset.top, rem_tablewidth = docWidth - tableoffright, rem_tableheight = docHeight - tableoffbottom, elm_offsetleft = btn_offset.left, elm_offsetright = btn_offset.left + btn_width, elm_offsettop = btn_offset.top + btn_height, btn_offsetbottom = elm_offsettop, left_edge = (elm_offsetleft - table_offset.left) < elm_width, top_edge = btn_offset.top < elm_height, right_edge = (table_width - elm_offsetleft) < elm_width, bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height; console.log(tableoffbottom); console.log(btn_offsetbottom); console.log(bottom_edge); console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height); var table_offset_bottom = docHeight - (table_offset.top + table_height); var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top; var bottomedge = touchTableBottom > table_offset_bottom; if (left_edge) { $(this).addClass('left-edge'); } else { $('.dropdown-menu').removeClass('left-edge'); } if (bottom_edge) { $(this).parent().addClass('dropup'); } else { $(this).parent().removeClass('dropup'); } } }); var table_smallheight = $('.tableresp'), positioning = table_smallheight.parent(); if (table_smallheight.height() < 320) { positioning.addClass('positioning'); $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static'); } else { positioning.removeClass('positioning'); $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative'); }
表格内的引导下拉列表不适用于 .table-responsive
这是现场示例的链接。 http://www.codeply.com/go/uBnL1bBs6v 从中您可以看到，当我将图层应用到...
我可以使用 bootstrap 来设计 HTML 电子邮件模板吗
我需要设计一个 HTML 电子邮件模板，通过电子邮件发送给我的客户。 我知道设计“html 电子邮件模板”： 不应链接任何 css 文件，所有样式应内联到
我正在使用 Bootstrap Multiselect 下拉菜单。我们可以显示“所有选定的”文本，而不是点击“全选”选项时显示的项目数吗？ http://davidstutz.github.io/
如何将 Clipboard.js 2.0 与 Bootstrap 5.2 工具提示结合使用？
我正在尝试构建一个带有各种按钮的页面，这些按钮将文本复制到剪贴板，然后向用户反馈值已被复制。值不是来自用户输入，每个按钮的值是
好吧，我不得不承认，即使在 BS3 中，我也一直在努力正确地工作。但我希望在折叠的容器外部保持持久的导航栏链接。 ...
我想用一个选项卡导航来控制两个不同的选项卡内容。 在 Bootstra 3 中，我有一个用逗号分隔数据目标的解决方案（如本例所示：https://stackoverflow.com/a/19719859/
我需要根据控制器代码中确定的条件弹出模型警告框。我将警告消息加载到临时数据中，并尝试在文本存在时强制打开模式。 它不...
HTML Bootstrap - 显示两个按钮 50% 的 Div 宽度
我有一个模式窗口，需要在底部显示两个按钮，例如使用 Bootstrap 按钮进行“继续”和“取消”。 我希望这些按钮并排占据整个宽度...
我想在卡片中给出图像的宽度和高度（300px;300px;）： 我想在卡片中给出图像的宽度和高度（300px;300px;）： <!-- Card Start From Here --> <div class="card" style="width: 35rem;"> <img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <!-- Card Start From Here --> 产量缩水了： 如果我删除下面的代码行，那么图像会很长但不会缩小： style="width:35rem;height:20rem;" 我已经尝试过： object-fit:cover;(Check all properties like fill, scale-down) 还尝试了一些CSS： <style> .clsAutofit{ height:300px; width:300px; } .clsImg{ max-width:100%; max-height:100%; } </style> <div class="clsAutofit"> <img src="/demo/img/1.jpeg" class="clsImg" /> </div> <!-- This also not working in card --> 我还尝试了一些属性： <style> img.one { display: block; object-fit: contain; max-width:500px; max-height:280px; width: auto; height: auto; } img.two { object-fit: contain; width: 535px;; height: 535px; } .box { width: 30%; height: 200px; border: 5px dashed #f7a239; } .containerTY { width: 60%; height: 500px; } .containerTYZ { max-width: 100%; } .thumbnail { width: 500px; height: 400px; } .img4R { width: 100%; height: auto; max-width: 50vw; } </style> 我尝试过，但还没成功。 任何想法或建议都欢迎。 你的方法没问题。问题是，引导类属性往往有!important。 因此将自定义 style.css 放在 bootstrap.css 下，这样它比 bs 具有更高的优先级， 然后使用： .my-image{ height : 300px !important; width: 300px !important } 将图像与类.my-image绑定，清除内联CSS样式，然后检查这一点。 .clsImg{ max-width:100%; width: 100%; height: auto; object-fit:cover; } 使用 img-fluid 表示图像，您还可以使用 w-25 w-50 w-100 表示 lg、md、sm 等设备 @media (min-width: 768px) { .w-md-50{width:50% !important;} } @media (min-width: 992px) { .w-lg-75{width:75% !important;} } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row pt-5 w-100 mx-auto"> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <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> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <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> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <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> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> </div> </div>