twitter-bootstrap 相关问题

Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

引导程序中卡页眉和卡页脚之间的间隙

我正在尝试创建引导卡。我已经创建了卡页眉和卡页脚（但没有卡体），但我观察到页眉和页脚之间存在间隙。可能是因为没有卡体的缘故......

reactjs twitter-bootstrap bootstrap-4 bootstrap-5

回答 1 投票 0

隐藏页面中的元素并使其仅在 Bootstrap 4 中打印时可见

有一个网页向用户显示信息。如果用户决定打印它，我想包含屏幕上不需要的附加信息，但在打印时会很有帮助。在

html css twitter-bootstrap bootstrap-4

回答 2 投票 0

隐藏页面中的div并使其仅在打印引导程序4上可见

有一个网页向用户显示信息。如果用户决定打印它，我想包含屏幕上不需要的附加信息，但在打印时会很有帮助。在

html css twitter-bootstrap bootstrap-4

回答 2 投票 0

如何使活动菜单项背景更明显

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>

html css twitter-bootstrap drop-down-menu bootstrap-5

回答 1 投票 0

如何让上下方向键换行在菜单中

在 Bootstrap 5 菜单中，在第一项中按向上箭头键或在最后一项中按向下允许键不会执行任何操作。如何制作箭头，如果在第一项中按下，则移动到菜单中的最后一项，而向下箭头则移动到...

javascript html twitter-bootstrap drop-down-menu bootstrap-5

回答 1 投票 0

在 Bootstrap 按钮内对齐文本

我注意到有类似的问题，但是我尝试了给定的解决方案，但没有任何效果* 我的自定义 CSS 文件 100% 正确链接到我正在处理的 html 文件 * 我正在使用 Bootstrap v4.3...

html css twitter-bootstrap bootstrap-4

回答 4 投票 0

Angular 分页生成错误的页数

我很难让 Angular 分页正常工作。页数好像少了。例如，对于我的一项搜索，返回的结果数为 1005。显示 16

javascript angularjs twitter-bootstrap pagination

回答 1 投票 0

引导模式：class =“modal fade”导致问题

我正在尝试让引导模式教程在我的 view.ejs 文件中工作。但 class="modal fade" 似乎引起了问题。如果我删除 class="modal fade"，模态将永久显示您...

html css twitter-bootstrap angular-ui-bootstrap bootstrap-modal

回答 3 投票 0

如何只为模态体放置滚动条？

我有以下元素：我有以下元素： <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 type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable"> Launch demo modal </button>  <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。模态主体可滚动内容的引导模态链接  <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; }

css twitter-bootstrap

回答 16 投票 0

设计在 <TD>

我正在尝试在面板内显示 5 列表格。以下是我正在尝试执行但无法正常工作的操作：我希望 SKU、描述、单价、数量和金额集中显示

html css twitter-bootstrap

回答 1 投票 0

覆盖 div 页面上的引导侧间隙

我正在使用 bootstrap 4.3.1、ASP.NET MVC (.NET 5)，所有页面的侧面都有间隙，这很好，但我希望一个 div 忽略这一点，并占宽度的 80% 并居中，而剩下的...

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

如何自动填充 Bootstrap 2 进度条中的剩余空间？

我有一个 Bootstrap 进度条。我想要最后一个 div，它有类 bar bar-警告来占据尚未被其他内部 div 占据的所有内容，而无需我进行计算...