Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
Bootstrap 5 下拉菜单是使用创建的 Bootstrap 5 下拉菜单是使用 创建的 <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li> </ul> </div> 测试用例：https://jsfiddle.net/b6or2s5e/ 活动项目背景为浅灰色： 如何使背景变成蓝色或更暗，就像 Windows 桌面应用程序菜单中一样？ 您希望它悬停时具有不同的颜色。您需要为此编写一个样式。所以你可以在这里给出你想要的颜色。下面的代码解释了如何更改元素的颜色。您可以选择要添加的颜色。 <style> .dropdown-item:hover { background-color: blue; } </style>
在 Bootstrap 5 菜单中，在第一项中按向上箭头键或在最后一项中按向下允许键不会执行任何操作。 如何制作箭头，如果在第一项中按下，则移动到菜单中的最后一项，而向下箭头则移动到...
我注意到有类似的问题，但是我尝试了给定的解决方案，但没有任何效果* 我的自定义 CSS 文件 100% 正确链接到我正在处理的 html 文件 * 我正在使用 Bootstrap v4.3...
我很难让 Angular 分页正常工作。页数好像少了。例如，对于我的一项搜索，返回的结果数为 1005。显示 16
我正在尝试让引导模式教程在我的 view.ejs 文件中工作。但 class="modal fade" 似乎引起了问题。如果我删除 class="modal fade"，模态将永久显示您...
我有以下元素： 我有以下元素： <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> 它显示类似这样的模式对话框，基本上，它将滚动条放在整个modal-dialog周围，而不是包含我要显示的内容的modal-body。 图像看起来像这样： 如何获得仅围绕 modal-body 的滚动条？ 我尝试将 style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" 分配给 modal-body 但没有成功。 您必须设置height的.modal-body并给予它overflow-y: auto。同时将 .modal-dialog 溢出值重置为 initial。 查看工作示例： http://www.bootply.com/T0yF2ZNTUd .modal{ display: block !important; /* I added this to see the modal, you don't need this */ } /* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ height: 80vh; overflow-y: auto; } 如果您仅支持 IE 9 或更高版本，则可以使用此 CSS，它将平滑缩放到窗口的大小。不过，您可能需要调整“200px”，具体取决于页眉或页脚的高度。 .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; } 对于 Bootstrap 版本 >= 4.3 Bootstrap 4.3 为模态框添加了新的内置滚动功能。如果内容的大小会使页面滚动，则这只会使 modal-body 内容滚动。要使用它，只需将类 modal-dialog-scrollable 添加到具有 modal-dialog 类的同一 div 中即可。 这是一个例子： <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 通过组合解决方案@carlos calla 和@jonathan marston 解决了问题。 /* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; } 补充Carlos Calla的精彩答案。 .modal-body 的高度必须设置，但您可以使用媒体查询来确保它适合屏幕尺寸。 .modal-body{ height: 250px; overflow-y: auto; } @media (min-height: 500px) { .modal-body { height: 400px; } } @media (min-height: 800px) { .modal-body { height: 600px; } } 可选：如果您不希望模态超出窗口高度并在 .modal-body 中使用滚动条，则可以使用此响应式解决方案。 请在此处查看工作演示：http://codepen.io/dimbslmh/full/mKfCc/ function setModalMaxHeight(element) { this.$element = $(element); this.$content = this.$element.find('.modal-content'); var borderWidth = this.$content.outerHeight() - this.$content.innerHeight(); var dialogMargin = $(window).width() > 767 ? 60 : 20; var contentHeight = $(window).height() - (dialogMargin + borderWidth); var headerHeight = this.$element.find('.modal-header').outerHeight() || 0; var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0; var maxHeight = contentHeight - (headerHeight + footerHeight); this.$content.css({ 'overflow': 'hidden' }); this.$element .find('.modal-body').css({ 'max-height': maxHeight, 'overflow-y': 'auto' }); } $('.modal').on('show.bs.modal', function() { $(this).show(); setModalMaxHeight(this); }); $(window).resize(function() { if ($('.modal.in').length != 0) { setModalMaxHeight($('.modal.in')); } }); 在最新的引导版本中，有一个类可以使模态主体可滚动。 .modal-dialog-scrollable 到 .modal-dialog。 模态主体可滚动内容的引导模态链接 <!-- Scrollable modal --> <div class="modal-dialog modal-dialog-scrollable"> ... </div> 我知道这是一个老话题，但这可能对其他人有帮助。 我能够通过固定模态对话框元素位置来使主体滚动。 由于我永远不会知道浏览器窗口的确切高度，因此我获取了我确定的信息，即页眉和页脚的高度。 然后，我能够使模态主体元素的顶部和底部边距与这些高度相匹配。 然后这产生了我正在寻找的结果。 我拼凑了一把小提琴来展示我的作品。 另外，如果您想要全屏对话框，只需取消注释 width:auto;在 .modal-dialog.full-screen 部分内。 https://jsfiddle.net/lot224/znrktLej/ 这是我用来修改引导对话框的CSS。 .modal-dialog.full-screen { position:fixed; //width:auto; // uncomment to make the width based on the left/right attributes. margin:auto; left:0px; right:0px; top:0px; bottom:0px; } .modal-dialog.full-screen .modal-content { position:absolute; left:10px; right:10px; top:10px; bottom:10px; } .modal-dialog.full-screen .modal-content .modal-header { height:55px; // adjust as needed. } .modal-dialog.full-screen .modal-content .modal-body { overflow-y: auto; position: absolute; top: 0; bottom: 0; left:0; right:0; margin-top: 55px; // .modal-header height margin-bottom: 80px; // .modal-footer height } .modal-dialog.full-screen .modal-content .modal-footer { height:80px; // adjust as needed. position:absolute; bottom:0; left:0; right:0; } 或者更简单，您可以先放在标签之间，然后再放到 css 类中。 <div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div> #scroll-wrap { max-height: 50vh; overflow-y: auto; } 使用 max-height 和 vh 作为 modal-body 上的单位或 modal-body 内部的包装 div。当用户调整窗口大小时，这将自动调整 modal-body 或包装 div（在本例中）的高度。 vh 是长度单位，代表视口高度的视口大小的 1%。 vh设备的浏览器兼容性图表。 示例：https://jsfiddle.net/q3xwr53f/ 在你的模态主体中，你必须设置一个高度，它可以是 % vh 或 calc: modal-body { height: 80vh; overflow-x: auto; } 或 modal-body { height: calc(100vh - 5em); overflow-x: auto; } 就我而言，看起来像： 对我有用的是将高度设置为 100%，自动溢出 希望这会有所帮助 <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div> 一个简单的 js 解决方案，用于设置与身体高度成比例的模态高度： $(document).ready(function () { $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>'); }); 身体高度必须是100% : html, body { height: 100%; min-height: 100%; } 我将模态身高设置为身体的80%，这当然可以定制。 希望有帮助。 这是我网站上完整的 Sass 重写（仍在构建中，一旦准备好将添加到此处） 它是 100% 移动响应且适合屏幕（仅当内容足够大时，否则宽度和高度将适合内容，所以是的，它很灵活）： 大于 576px (sm) 的屏幕上的间距为 1.75rem（4 边相等） 小于 576px 的屏幕上的间距为 0.5rem 为了灵活和可滚动modal-body，用required注释的行是您需要的最少代码。 .modal-header, .modal-footer { border: none !important; } .modal-dialog { height: 100% !important; // required margin: 0 0.5rem !important; padding: 0.5rem 0 !important; overflow-y: initial !important; // required @media (min-width: $sm) { margin: 0 auto !important; padding: 1.75rem 0 !important; max-width: initial !important; // overwrite default max-width width: fit-content !important; // flexible width min-width: 500px !important; // makes it fat enough by default } } .modal-content { max-height: 100% !important; // required } .modal-body { padding-top: 0 !important; overflow-y: auto !important; // required } 如果您使用boostrap，您可以将标签粘贴到div处： 类=“dataTables_scrollBody”样式=“位置：相对；溢出：自动；最大高度：500px；” 添加类modal-dialog-scrollable如果您使用的是bootstrap 4.5或更高版本 否则 .modal-body{ height :100%; overflow-y:auto; }
我正在尝试在面板内显示 5 列表格。以下是我正在尝试执行但无法正常工作的操作： 我希望 SKU、描述、单价、数量和金额集中显示
我正在使用 bootstrap 4.3.1、ASP.NET MVC (.NET 5)，所有页面的侧面都有间隙，这很好，但我希望一个 div 忽略这一点，并占宽度的 80% 并居中，而剩下的...
我有一个 Bootstrap 进度条。我想要最后一个 div，它有类 bar bar-警告来占据尚未被其他内部 div 占据的所有内容，而无需我进行计算...
我有一个 Bootstrap 进度条。我想要最后一个 div，它有类 bar bar-警告来占据尚未被其他内部 div 占据的所有内容，而无需我进行计算...
我试图仅在一侧创建阴影，如下图所示，来自 Laravel。 或者这个 我尝试使用 css 伪类来制作类似的阴影。 （参见下面的代码）但阴影不是
Bootstrap 5.3 新颜色主题 SASS 上的 Subtle 和 Emphasis 类
我正在 Bootstrap SASS 上添加新的颜色主题。 我有一个包含我的模组和新颜色（金色）的自定义文件。 经过大量阅读和搜索后，我能够创建新主题以及几乎所有内容
我在页面顶部的固定导航栏中使用 Bootstrap 的下拉菜单。 一切正常，但我遇到了下拉菜单项显示在其他页面元素后面而不是在...中的问题。
我正在使用 Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html 因此，我使用他们的“下拉菜单”类来创建一些简单的快速使用下拉菜单，但由于某些原因，它们在 IE7 上是
我有一个带有导航栏和滑动栏的测试网站。我试图让侧边栏堆叠在导航栏上或调整导航栏的大小。 我认为页脚很好，因为它的位置是固定的。我会...
我在页面顶部的固定导航栏中使用 Twitter 引导下拉菜单。 一切正常，但我遇到了下拉菜单项显示在其他页面元素后面的问题，而不是......
我有一个可见表，其中有大量通过 d-none 隐藏的表。我知道我可以通过以下方式打开桌子： $("#US_table").addClass("d-none"); $("#US_table").to...
使用此处发布的答案，我创建了一个按钮组 1 使用此处发布的答案，我创建了一个按钮组 <div class="btn-group" data-toggle="buttons-radio"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> </div> 和一个 jQuery 函数 $(".btn-group> .btn").on("click", function(){ alert($('.btn-group> .btn').text()); }); 但是，当我按下按钮时，警报框中显示的文本会返回所有按下的按钮，如何才能只返回按下的按钮？ 此选择器返回all匹配元素： $('.btn-group> .btn') 因此，合理地，这将返回所有文本，或者可能默认为第一个匹配文本（后者）： $('.btn-group> .btn').text() 不过，您不需要首先重新选择元素。 如果您只想要被单击的元素，this指的是 jQuery 事件处理程序中的元素： $(".btn-group> .btn").on("click", function(){ alert($(this).text()); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div class="btn-group" data-toggle="buttons-radio"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> </div>
关于Bootstrap 5.1.3： 我想用引导类“.invisible”隐藏页面上的元素。 问题是 bootstrap 为这个不可见的元素分配了空间，这看起来很糟糕......
我在此页面上嵌入的 pdf 出现问题。赞助 该网站之前的版本是 html4，嵌入是使用这样的对象标签完成的 我在此页面上嵌入的 pdf 出现问题。 赞助 这个网站之前的版本是html4，嵌入是用像这样的对象标签完成的 <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="700px"> <p>It appears you don't have a PDF plugin for this browser.</p> <p id="missing-pdf-plugin">You can <a href="pdf/GreekFestSponsorship2013.pdf">click here to download the PDF file</a>.</p> </object> 这是新代码 /* Flexible iFrame */ .flexible-container { position: relative; height: 0; overflow: hidden; } .flexible-container iframe, .flexible-container object, .flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Greek Festival Portsmouth NH</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles --> <link href="css/custom.css" rel="stylesheet"> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Font Awesome JS --> <script src="https://use.fontawesome.com/a0aac8df13.js"></script> <meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The Glendi or party will begin on Friday, July 15th, July 16th and July 17th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land."> <meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2016, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation ,greek orthodox wine event, orthodox greek food and wine festivals, 2016 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2016, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates, greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music "> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> </head> <body> <div class="main-navigation-container navbar-fixed-top" id="primary-navbar"> <nav class="navbar"> <div class="container-fluid"> <!-- Mobile Toggle Button and stuff --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="" title="PortsmouthGreekFestival.com">PortsmouthGreekFestival.com</a> </div> <!-- End of mobile toggle button --> <!-- Start of the navbar --> <div class="collapse navbar-collapse" id="primary-navigation"> <ul class="nav nav-justified"> <li><a href="index.html">Home<span class="sr-only">(current)</span></a></li> <li><a href="Menu.html">Menu</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="events.html">Schedule of Events</a></li> <li><a href="sponsors.html">Sponsors</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav> </div> <header class="masthead"> <img src="images/Banner.jpg" alt="Portsmouth Greek Festival Logo"> </header> <!-- /.container --> <!-- Feature --> <div class="container"> <h1>Sponsorship Opportunities</h1> <div class="flexible-container-embed"> <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="100%"> <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://portsmouthgreekfestival.com/pdf/GreekFestSponsorship2013.pdf">Download PDF</a></p> </object> </div> </div> <footer> <!-- Copyright etc --> <div id="Copyright"> <p>Copyright © <script>document.write(new Date().getFullYear());</script> PortsmouthGreekFestival.com</p> </div> </footer> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- IE10 viewport bug workaround --> <script src="js/ie10-viewport-bug-workaround.js"></script> </body> </html> 您可以在此屏幕截图中看到 pdf 的高度为何不是 100%。 您有 2 个额外的规则集可以按预期工作 但是您需要... ...在 HTML 中更正此问题： <div class="flexible-container-embed"> 对此： <div class="flexible-container"> ...并将其添加到 .flexible-container CSS 规则集： padding-bottom: 100%; 添加这 2 个规则集时，将它们放入 <style> 元素中，然后将其添加到 <head> 元素内的最后一个位置。请访问下面的 Plunker 链接查看示例。 /* Flexible iFrame */ .flexible-container { position: relative; /* This blank line was probably: || padding-top: 56.25%; */ height: 0; overflow: hidden; } /* This ruleset says: || "Apply the following properties and their values to ANY `<iframe>`, || `<object>`, or `<embed>` THAT IS A CHILD OF any element with the || class of `.flexible-container`. */ .flexible-container iframe, .flexible-container object, .flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 当您应用这 2 个规则集时，您已经为包装 <object> 的 div 指定了 .flexible-container-embed 类，但这两个规则集都适用于具有 .flexible-container 类的元素，以及 它的任何子级为 <iframe> 的元素、 <object> 或 <embed>。 基本上，删除类名中的 -embed 部分。 接下来是 padding-bottom 属性。通常为 56.25%，当应用于 iframe 容器时，适当的上下文可以保持 9 的高度和 16 的宽度。这对于宽屏幕格式视频来说很好，但对于 PDF 来说不太好，因为 PDF 可能具有长宽比为 8:11 或 72%（我在演示中使用了 100%，因为这是您所要求的，预计编辑将包含 72% 版本。）如果我们将填充与 height:0 结合起来，我们会得到一个类似于“shrinkwrap”的容器，根据内容的宽度调整其高度。 更新：由于 PDF 插件添加了填充，从 100% 到 72% 没有明显的变化。 我将<object>更改为<iframe>，因为它们更通用，您也可以使用<embed>。回顾这个PLUNKER 以 100% 的高度显示 PDF 文件是相当困难的。您可能想要采用 Bootstrap 的“响应式嵌入式媒体”方法，因为结果相当不错，而且麻烦也更少。 Chrome 中的结果： Firefox 中的结果： 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PDF</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello World!</h1> <div class="embed-responsive embed-responsive-4by3"> <object data="test.pdf" type="application/pdf"> <p> Your browser does not support embedded PDF files.<br> <a href="test.pdf">Click here to download the PDF file.</a> </p> </object> </div> </div> </body> </html> 请记住，并非所有浏览器都支持嵌入 PDF 文件，因此 <object> 标签内有此通知。