Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我正在使用 Bootstrap 并创建了一个具有简单导航菜单的页面。我想为其中一个链接添加模式，该链接已经有一个工具提示。 我确实将模态添加到了 li 中，就像
如何在 Bootstrap v5 中使用 javascript 编辑模态 data-bs-keyboard 属性？
我正在尝试拥有一种设置面板，可以启用/禁用模式的 data-bs-keyboard 属性，允许或禁止它们使用转义键关闭。 到目前为止唯一的代码...
我正在将模态从 Bootstrap 3 升级到 4。我有一些代码将更新打开模态的选项（特别是背景和键盘选项）。在 Bootstrap 3 中我完成了这个...
将 bootstrap 添加到 symfony 应用程序的正确方法是什么？
我正在使用 symfony 框架 3 来开发 Web 应用程序。我需要将 boostrap 的功能添加到我的应用程序中。我使用以下命令安装了引导程序。 （我正在使用作曲家。） 作曲家
我希望我的卡片覆盖屏幕的宽度，但我的代码如下。 尝试过卡组，但没有帮助。 我希望我的卡片覆盖屏幕的宽度，但我的代码如下。 尝试过card-deck，但没有帮助。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container p-3 bg-white rounded"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">0-10</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">1-9</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">2-8</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">3-7</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> <div class="carousel-item "> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">4-6</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">5-5</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">6-4</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">7-3</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> 在 div 块中将 col-lg-3 更改为 col-lg-auto，以便它在屏幕上占据相同的宽度 尝试使用 .card-columns 类，如下所示： <div class="card-columns"> <div id="card1" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 1 TITLE </h5> </div> <div class="card-body"> CARD 1 BODY </div> </div> <div id="card2" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 2 TITLE </h5> </div> <div class="card-body"> CARD 2 BODY </div> </div> </div> 并删除 row 和 col div，卡片列类负责剩下的
我想在每次单击按钮时切换按钮上的文本，例如从“显示更多...”到“显示更少...”。 我有一个按钮，用于展开或折叠附近的块（请参阅折叠部分...
我如何编辑这个 Bootstrap5 dopdown 菜单？
我需要将下拉菜单设置为没有内容的页面，占据页面的所有宽度。我还需要将菜单的所有“lorem”链接放在导航栏中的中央。我……
实现 Bootstrap Collapse “阅读更多”而无需绝对高度
此片段应显示一个水平 Bootstrap 卡，其中包含 .collapse，它使用 min- 和 max-height 来实现部分折叠。 （请以全页模式运行，以防滚动条不...
我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在手机和平板电脑上很好用，但在桌面上......
React + Bootstrap 5.3：如何在 Bootstrap 的 SASS 变量上应用条件 CSS 选择器覆盖？
TLDR：我想根据 CSS 选择器更改 Bootstrap SASS 变量值 例子： //$headings-color 是 Bootstrap SASS 变量 $标题颜色：红色； //作品 。红色的 { $headings-color：重新...
Bootstrap 折叠使用 css 选择第一个和最后一个子元素
如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”。 如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”.. <div id="accordion2" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 1<br /> </a></div> <div id="collapseOne" class="accordion-body in collapse" style="height: auto;"> <div class="accordion-inner"> <p>Content 1</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 2<br /> </a></div> <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 2</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 3<br /> </a></div> <div id="collapseThree" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 3</p> </div> </div> </div> http://jsfiddle.net/PzB8D/1/ 你必须先去accordion-group，然后参考accordion-heading 这将是唯一一个具有类accordion-heading的元素:) .accordion-group:first-child .accordion-heading a{color: #f00;} .accordion-group:last-child .accordion-heading a{color: #0f0;} .accordion { &:last-child{ .card-header button.collapsed { border-bottom: none; } } &:first-child{ .card-header button.collapsed { border-bottom: none; } } }
引导模式打开时无法在输入类型=“文本”中键入（甚至无法聚焦）
我有一个 jquery 代码，它创建一个下拉菜单并将其精确放置在用户右键单击的位置。一切正常，除了一件事：我无法在输入字段中键入内容。 生成的dro...
我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码： 我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码： <input id="inp" type='file' accept="image/*"onchange="readURL(this);" /><br> <img id="blah"/> <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result) .width(150) .height(150); }; reader.readAsDataURL(input.files[0]); } } </script> 我不太明白你的问题，你可以将数据保存在一个变量中，然后在必须发布图像时使用该变量，你应该避免将图像直接存储在数据库中，而是存储对它们的引用。 但是如果你想在选择图像后简单地显示图像，你可以这样做： let input = $('input'), img = $('img'), reader = new FileReader(); function readFile(e) { reader.onload = function(e) { img.attr('src', e.target.result) } reader.readAsDataURL(e.target.files[0]) } input.on('change', readFile) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inp" type='file' accept="image/*"/> <img/> 但是，如果您想将图像永久保存在数据库中，您将必须了解后端如何工作，并且可能需要设置一个 Restful API。
Bootstrap 5.3 tablist 里面<select><option>不能在除最新的firefox之外的其他浏览器上工作
除了 Mozilla Firefox 浏览器之外，我的以下代码无法正常工作。我正在使用 Bootstrap 5.3。任何人都可以帮助我制作带有选择选项的工作表格列表吗？ 这是我的代码在
我正在尝试使用一些引导功能，例如 Yii CHtml 类中的图标字形，这是我的代码： 登录'...
我有一个 Laravel 应用程序，我试图在徽章上触发 Bootstrap 工具提示，但在控制台中收到以下错误： 未捕获的引用错误：工具提示未定义 我正在导入
我正在开发一个 Vue/Bootstrap 项目，并尝试根据表中项目的值有条件地更改 b 表中行的颜色。我使用该方法取得了一些成功
您好，您能帮我在代码中设置列吗？我有这个代码： 侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。 代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。 对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。 列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1"> <!-- seems to work even without flex-column :D --> <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div> <!-- with flex-wrap they will go under eachother if there is not enough space --> <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>
水平引导卡，其卡体填充垂直空间并具有条件“扩展器”（了解更多）按钮
我正在尝试制作一张具有有限高度的水平卡片和一个按钮扩展器以消除高度限制。 .col-4 应包含使用 object-fit:cover 的图像。 .card-body 可能包含
今天，当我尝试在 Bootstrap Modal 上显示日期选择器时，我遇到了这个问题。 我使用 bootstrap-datepicker 作为日期选择器库。 这是我的模式形式： <... 今天当我尝试在 Bootstrap Modal 上显示日期选择器时遇到这个问题。 我使用 bootstrap-datepicker 作为日期选择器库。 这是我的模式形式： <div class="form-group"> <label for="message-text" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 这是我的日期选择器脚本： $('#datepicker2').datepicker({ autoclose: true, format: 'yyyy-mm-dd', zIndexOffset: 10000 }); 我已经使用了 zIndexOffset 但它不起作用，日历仍然显示在模式后面。 有人可以建议解决方案吗？ 谢谢你。 您应该尝试在模式中添加日期选择器容器div。你可以给模态一个 id，如下所示： <div class="form-group" id="myModalWithDatePicker"> <label for="start_date" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 然后您可以使用 container 选项，如下所示： $('#datepicker2').datepicker({ autoclose: true, container: '#myModalWithDatePicker', format: 'yyyy-mm-dd' }); 我使用此选项来修复。 .modal-open .ui-datepicker{z-index: 2000!important} 此选项已在模态打开时应用（类 modal-open 添加到主体） 这对我来说很好用...只需添加样式 <style> /* style sici */ .datepicker { z-index: 1600 !important; } </style>