Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我正在设计一个场景，其中我有 n 个团队成员个人资料卡，该卡从右向左移动。但目前在我的情况下，动画最多有 5 张卡，然后动画变得
boostrap-select错误：未捕获类型错误：无法读取属性“3”
Boostrap 选择实时搜索在输入框快照时出现错误 和 javascript 控制台错误日志 bootstrap-select.js：199未捕获类型错误：无法读取未定义的属性“3” ...
我正在使用 Bootstrap 5 为音乐播放器创建一个 HTML 布局。播放器的一部分我想在其中显示有关歌曲中当前正在播放的模式的信息...
我用 HTML/CSS 设计了我的网站并使用了最新的引导程序，网站看起来不错，但是当我在移动设备中打开这个网站时，它在移动设备上显示的字体非常小。 我的网站 我在做什么...
美好的一天，我使用 bootstrap 3 并尝试使我的 bootstrap 轮播位于中心。这是我到目前为止尝试过的脚本。 美好的一天，我使用 bootstrap 3 并尝试使我的 bootstrap 轮播位于中心。这是我到目前为止尝试过的脚本。 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .navbar.transparent.navbar-inverse .navbar-inner { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0,0,0,0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00))); background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); } #Intro { display: inline-block; } #topnavbar { top: 20px; } .carousel { width:600px; height:400px; } .carousel-inner > .item > img { margin: 0 auto; } div.c-wrapper{ width: 100%; /* for example */ margin: auto; } .carousel-inner > .item > img, .carousel-inner > .item > a > img{ width: 100%; /* use this, or not */ margin: auto; } .container{ border: 1px; } </style> </head> <body> <div class="container" style="border:1px solid #cecece;"> <div id="Intro" class="col-md-offset-5"> LOGO </div> <nav id="topnavbar" class="navbar transparent"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Product</a></li> <li><a href="#">Promo</a></li> <li><a href="#">Competition</a></li> <li><a href="#">Ladies Room</a></li> <li><a href="#">Need Help?</a></li> </ul> </div> </nav> <div class="c-wrapper"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="https://dummyimage.com/600x400/000/fff"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </div> </body> </html> 但是，我的脚本位于我的旋转木马上方，仍然位于屏幕左侧。然后我尝试用谷歌搜索，我找到了这个https://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive但仍然没有帮助。有什么解决办法吗？预先感谢，抱歉我的英语不好 您只是缺少一行代码： .carousel { margin: 0 auto; } 轮播是一个 <div>，它是一个 块级元素，因此您可以通过将水平边距设置为 auto来将其居中。简写 margin: 0 auto 将顶部和底部边距设置为 0，同时将水平边距设置为 auto。 这是一个工作示例（运行代码片段后单击“完整页面”）： .navbar.transparent.navbar-inverse .navbar-inner { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0, 0, 0, 0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0, 0, 0, 0.00)), color-stop( 100%, rgba(0, 0, 0, 0.00))); background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%); } #Intro { display: inline-block; } #topnavbar { top: 20px; } .carousel { width: 600px; height: 400px; margin: 0 auto; } .carousel-inner>.item>img { margin: 0 auto; } div.c-wrapper { width: 100%; /* for example */ margin: auto; } .carousel-inner>.item>img, .carousel-inner>.item>a>img { width: 100%; /* use this, or not */ margin: auto; } .container { border: 1px; } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="border:1px solid #cecece;"> <div id="Intro" class="col-md-offset-5"> LOGO </div> <nav id="topnavbar" class="navbar transparent"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Product</a></li> <li><a href="#">Promo</a></li> <li><a href="#">Competition</a></li> <li><a href="#">Ladies Room</a></li> <li><a href="#">Need Help?</a></li> </ul> </div> </nav> <div class="c-wrapper"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="https://dummyimage.com/600x400/000/fff"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </div> </div> </body> </html> 希望这有帮助！ :) 我更改了 CSS 样式如下并为我工作，对此非常陌生，因此可能会导致一些我不知道的错误 和下面的按钮
我尝试弹出一个包含条款和条件的模式窗口，只有当用户接受条款和条件时，数据才会提交到数据库。我想在...之前验证用户输入
我想更改下拉插入符号的指向方向，因为它最初指向下方，因此我希望它最初指向正确的方向，并且当单击特定下拉菜单/链接时更改...
我正在使用最新版本的 bootstrap ，我想知道如何在聚焦或单击时更改下拉导航链接的背景颜色..目前默认背景颜色是蓝色，我...
我尝试了各种方法来使用按钮而不是现有的复选框，但无法让它工作。我也尝试了 onClick 方法，但也失败了。 演示：https://jsfiddle.net/yxez4a2u/ HTML： <...
输入复选框在亮/暗模式之间切换。但是，我希望它作为 2 个独立的按钮。我该怎么办？ 演示：https://jsfiddle.net/ot1ecnxz/1 HTML： 输入复选框在亮/暗模式之间切换。但是，我希望它作为 2 个独立的按钮。我该怎么办？ 演示：https://jsfiddle.net/ot1ecnxz/1 HTML： <input type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="myFunction()" /> <hr /> <button type="button" data-bs-theme-value="light"> Light </button> <button type="button" data-bs-theme-value="dark"> Dark </button> <hr /> <p> This is a sample text </p> JS： function myFunction() { var element = document.body; element.dataset.bsTheme = element.dataset.bsTheme == "dark" ? "light" : "dark"; } 如果用 2 个专用按钮代码替换复选框来实现这一点应该是， HTML： <button type="button" data-bs-theme-value="light" onclick="setTheme('light')"> Light </button> <button type="button" data-bs-theme-value="dark" onclick="setTheme('dark')"> Dark </button> <hr /> <p> This is a sample text </p> Javascript： function setTheme(theme) { document.body.dataset.bsTheme = theme; } 您可以尝试以下方法： document.getElementById("lightButton").addEventListener("click", function() { toggleMode('light'); }); document.getElementById("darkButton").addEventListener("click", function() { toggleMode('dark'); }); function toggleMode(mode) { var element = document.body; element.dataset.bsTheme = mode; } <link id="themeLink" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <button type="button" data-bs-theme-value="light" id="lightButton"> Light </button> <button type="button" data-bs-theme-value="dark" id="darkButton"> Dark </button> <hr /> <p>This is a sample text</p>
我正在使用 Bootstrap 5.1.3，我想在使用 CSS background-filter 属性打开模态时模糊背景。 我尝试过的最简单的方法是： .modal-背景{ 背景过滤器：b...
Bootstrap 不适用于我的 ASP.NET MVC (C#)
我正在使用 Visual Studio 2019 并遵循 ASP.NET MVC 教程，其中从 bootswatch 下载 bootstrap.css 文件，然后将其放置在 MVC Web 应用程序的 Content 文件夹中...
我正在尝试创建波纹管盒 我使用了下面的 HTM 代码 .noMargin { 边距：0 像素； } .bordertp { 顶部边框：1px 纯灰色； } .borderbtm { 底部边框：1px 纯灰色； } .borderright{
所以我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，因此根据代码，当进入平板电脑模式时，即当视口宽度为 768px 时，列数应变为 4...
我有以下html 我有以下html <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 0 col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> <div class="col-md-4 col-sm col-xs-1"> <img src = "/static/assets/howitworks3.png" /> <p>Test</p> </div> </div> </div> 我试图在桌面上显示三列，在移动设备上显示一列。我怎样才能做到这一点？ div 必须具有响应能力。谢谢！我正在使用 bootstrap、html 和 CSS。 一种方法是使用媒体查询。如果特定条件为真，媒体查询用于应用一些 CSS 属性。 将 id （或唯一的类）添加到所有三个 col div 并将视口添加到 html 文件的 <head>，如下所示： <head> <meta name='viewport' content='width=device-width,initial-scale=1'/> <!-- Other meta tags ... --> </head> 并将此 css 属性添加到您的样式中： @media (max-width: 599px) {#col1, #col2 { display: none; }}
Angular Bootstrap 手风琴动画在制作过程中无法正常工作
我已经在 Angular 中的应用程序上安装了 Bootstrap，但由于某种原因，当我运行 ng build --configuration production 并将其打开到本地服务器时，当我在生产中时，bootstrap Accordion anima...
打开视频弹出窗口或单击视频上的播放按钮时暂停所有 html 卡的动画
我有两张卡，一张是包含视频的小卡，另一张是包含标题和说明的大卡。小卡嵌套在大卡内。我想要的是当我...
以下代码用于订购商品，它允许用户自由键入，但它包含从我的数据库填充的数据列表，因此如果他们开始键入其中一个商品，它就会弹出。我想强行...
有没有办法增加 Bootstrap api 中按钮的行高，因为我在创建按钮时遇到问题 这是我的代码： @import“bootstrap-5.3.3/scss/mixins”； @import“启动...
Bootstrap modal-body – 禁用使用 ESC 键或鼠标关闭
如何禁用模态主体关闭，请注意，我不能使用模态类或模态淡入淡出。 我正在起诉两个页面，其中一个页面有 href，点击后转到另一页面有模式：