Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我的网站有记录功能。如果用户按下 Ctrl+Alt+R，录音就会开始。现在我想在我的 html 页面中有一个名为 RECORD 的按钮，这样当用户点击该按钮时即可录制
使用表格内的按钮打开引导下拉菜单 函数 xonclick() { 新的 bootstrap.Popover( document.getElementById("grid_muu"), document.getElementById("seadedMenyy")...
我一直在考虑使用 Bootstrap 的 Popover 小部件，虽然我喜欢它的外观，但我希望看到的一件事是能够在弹出框主体的内容中放置超链接或按钮。
我正在设计searchBox，它在右侧有一个选择（下拉菜单），但是当我按下下拉菜单时没有任何反应意味着我没有看到下拉列表项，我不知道为什么不听
基本上，留给我的唯一问题是自动调整假定标题旁边的行的高度。我用 div flex 包含了垂直线和标题，尽管我不确定...
我已经查看了这里的一些关于此问题的线程，但我在修改代码以适应我的设计时遇到了问题。 我在这里使用折叠按钮：http://getbootstrap.com/javascript/#collapse ...
为什么这里需要 height:0 才能使 div 按预期运行？
我需要一个列中的div，如果其中有太多项目，则该div可以滚动，但出于某种原因，我找到解决方案的唯一方法是使用“height：0”，这对我来说毫无意义，我t。 ..
我正在尝试使用多选Bootstrap，我使用了以下代码，该代码也可以在他们的网站（http://davidstutz.github.io/bootstrap-multiselect/）中找到，它显示了多选按钮
我正在尝试使用 Vue.JS 构建 Web 应用程序，并且在我的应用程序中，我正在尝试使用 [Bootstrap Icons][1]。但由于某种原因，即使添加了图标后，它们也没有出现......
我在堆栈上找到了这个问答，但两种解决方案都不起作用.. 如何在 Twitter 引导页面中将 mailchimp 嵌入表单居中？ 以 mailchimp 形式居中输入 我认为这些任务...
<div class="container-header"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" [routerLink]="['/home']" routerLinkActive="active"> <img src="/assets/images/Logo.png" class="img-logo"> </a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" [routerLink]="['/home']" routerLinkActive="active">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['/eventi']" routerLinkActive="active">Eventi</a> </li> <li class="nav-item"> <a class="nav-link disabled" (click)="userArea()">Sezione Admin</a> </li> </ul> </div> </nav> </div> .container-header { height: 100%; display: flex; flex-direction: row; .bg-dark { width: 100%; .nav-link { border: 1px solid red; color: white; border-radius: 9px; margin-left: 10px; margin-right: 10px; } .nav-link.active { border: 1px solid rgb(255, 255, 255); color: white; border-radius: 9px; } } .navbar-brand { img { aspect-ratio: 1/1; height: 5rem; } } } 我正在开发一个 Angular 项目，并且安装了 bootstrap。一切正常，因为我正在导入引导程序组件。但主要问题是，当我切换到智能手机视图并且显示导航栏的切换按钮时，当我单击它时它不会执行任何操作。 我在这里检查了其他解决方案，但没有解决这个问题 <div class="main-container"> <div class="header-container"> <app-header></app-header> </div> <div class="page-container"> <div class="router-container"> <router-outlet></router-outlet> </div> </div> 标题位于应用程序组件内部，因此它会自动出现在每个页面中。这是CSS： .main-container { display: flex; flex-direction: column; height: 100vh; width: 100%; .header-container { height: 8%; width: 100%; color: white; text-align: center; } .page-container { flex: 1; width: 100%; overflow: auto; .router-container { text-align: justify; height: 100%; } } } 以下是存在此问题的页面示例： <div class="home-container"> <div class="home"> <div class="home-title"> TITLE </div> <div class="home-banner"> <div class="banner-text"> .home-container { display: flex; flex-direction: column; width: 100%; .home { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; .home-title { font-size: 32px; font-weight: 600; font-family: General; font-weight: semibold; height: 20%; @media (max-width: 768px) { font-size: 24px; } } .home-banner { margin-top: 15px; width: 70%; height: 16rem; display: flex; justify-content: center; align-items: center; border-radius: 6px; border: 2px solid #9E0B0F; background-image: url('../../../../public/assets/images/banner.jpg'); background-size: cover; @media (max-width: 768px) { width: 90%; height: 12rem; } .banner-text { padding: 20px; font-size: 22px; font-weight: 400; color: rgb(255, 255, 255); font-family: General; width: 90%; height: 80%; align-content: center; background: rgba(161, 157, 157, 0.15); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 10px; @media (max-width: 768px) { font-size: 14px; padding: 8px; } } } 需要配置data-bs-toggle="collapse"和data-bs-target="#navbarTogglerDemo01"，可以查看官方文档 Bootstrap - 导航栏示例 ... <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> ... 完整代码： main.ts import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; @Component({ selector: 'app-root', standalone: true, template: ` <div class="container-header"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" > <img src="/assets/images/Logo.png" class="img-logo"> </a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" >Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" >Eventi</a> </li> <li class="nav-item"> <a class="nav-link disabled">Sezione Admin</a> </li> </ul> </div> </nav> </div> `, }) export class App { name = 'Angular'; } bootstrapApplication(App); index.html <!DOCTYPE html> <html lang="en"> <head> <title>My app</title> <meta charset="UTF-8" /> <base href="/" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <app-root>Loading...</app-root> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" ></script> </body> </html> Stackblitz 演示
为什么按钮和输入在 Bootstrap 中不能很好地对齐？ 我尝试了一些简单的事情，例如： 按钮 按钮比...低约5px
Bootstrap-select 不适用于 Bootstrap 5
我按照他们官方网页上的入门指南进行操作 我将 JS 和 CSS 库添加到我的项目中，但它不起作用。 由于某种原因 selectpicker 设置为显示：none！重要：...
添加 Angular-bootstrap-lightbox 依赖项时出现错误：$injector:modulerr 模块错误
我正在尝试为该项目添加依赖项，是一个用于 AngularJS 的简单画廊灯箱。 https://github.com/compact/angular-bootstrap-lightbox 我按照步骤操作，尝试使用 npm，我结束了...
bootstrap - 我正在开发 bootstrap 项目，我想确认我正在做正确的事情 [已关闭]
这是我在 bootstrap 上的第二个项目，但是我对它还不够熟悉。 我不会在这里发布我的代码，我会给你测试站点的网址。我认为这样做并没有错。
我试图将图像堆叠在所有文本之上，并将图像与一些文本放在同一行。 <question vote="1"> <p>我试图将图像堆叠在所有文本之上，并将图像与一些文本放在同一行。</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code><!DOCTYPE html> <html> <head> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- jquery ui --> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <!-- bootstrap --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <table> <tbody> <tr> <td rowspan='6'> <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/> </td> </tr> <tr> <td>Bob</td> </tr> <tr><td><a href="/cdn-cgi/l/email-protection" data-cfemail="3a5855587a5f425b574a565f14595557">[email protected]</a></td></tr> <tr><td>23</td></tr> <tr><td>Contact</td></tr> <tr><td>Party</td></tr> <tr><th>Start Term</th><td>2016.01.01</td></tr> <tr><th>End Term</th><td>2016.01.01</td></tr> <tr><th>Term</th><td>today</td></tr> <tr><th>Office</th><td>here</td></tr> <tr><th>State</th><td>CA</td></tr> <tr><th>Fax</th><td>here</td></tr> <tr><th>Birthday</th><td>today</td></tr> <tr><th>Social Links</th><td>here</td></tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>请查看我的代码： <a href="https://plnkr.co/edit/YgcNPhX8hc4HnNgZALBr?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/YgcNPhX8hc4HnNgZALBr?p=预览</a></p> <p>棘手的部分是图像位于行中： <pre><code><td rowspan='6'></code></pre> 这将 6 个 tds 合而为一，我想使用 bootstrap3 将其堆叠在所有内容之上。</p> <p>请参考图片来了解我在说什么：</p> <p>之前：<br/> <a href="https://i.sstatic.net/CJjb8.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvQ0pqYjgucG5n" alt="enter image description here"/></a></p> <p>之后：<br/> <a href="https://i.sstatic.net/VbJhn.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvVmJKaG4ucG5n" alt="enter image description here"/></a></p> <p>先谢谢大家了！</p> </question> <answer tick="true" vote="0"> <p>我根据您的要求编辑了 plunker 链接。我没有 plunker 帐户，因此我的代码不会保存在链接上。这是代码供您参考：</p> <pre><code> <!DOCTYPE html> <html> <style type = "text/css"> table{ width:100%; height:100%; align:center; text-align:center; } img{ align:center; background-size:cover; } tbody{ align:left; text-align:left; } </style> <head> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- jquery ui --> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <!-- bootstrap --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <table> <thead> <tr> <td> <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/> </td> </tr> <tr><td>Bob</td></tr> <tr><td><a href="/cdn-cgi/l/email-protection" data-cfemail="7614191436130e171b061a135815191b">[email protected]</a></td></tr> <tr><td>23</td></tr> <tr><td>Contact</td></tr> <tr><td>Party</td></tr> </thead> <tbody> <tr><th>Start Term</th><td>2016.01.01</td></tr> <tr><th>End Term</th><td>2016.01.01</td></tr> <tr><th>Term</th><td>today</td></tr> <tr><th>Office</th><td>here</td></tr> <tr><th>State</th><td>CA</td></tr> <tr><th>Fax</th><td>here</td></tr> <tr><th>Birthday</th><td>today</td></tr> <tr><th>Social Links</th><td>here</td></tr> </tbody> </table> </body> </html> </code></pre> <p>我添加了 css 样式选择器来获得效果。还从 <pre><code>rowspan</code></pre> 中删除了 <pre><code>img td</code></pre> 属性。您不需要 6 个 <pre><code>td</code></pre> 即可从图像中获得所需的效果。您可以将其放在一行中的一个 <pre><code>td</code></pre> 中，并应用 <pre><code>background-size:cover</code></pre> 属性将图像按比例拉伸成一行。</p> </answer> <answer tick="false" vote="0"> <p>我不知道上面 html 中的表格发生了什么，这根本不是引导程序。尽管如此，您需要以最简单的形式实现此布局：</p> <p><a href="https://plnkr.co/edit/yK4MSDMA63P1n0roSgAW?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/yK4MSDMA63P1n0roSgAW?p=preview</a></p> <p>html 看起来像这样。它本质上是 2 行内容。第一行被分成 2 个 div，当浏览器的视口较小时，这两个 div 都将占用 12 个（全宽）网格位置，而当浏览器的视口为中等或更大时，它们将占用 6 个网格位置（这就是 <pre><code>col-md-6</code></pre> 类的作用）。 第二行有一个 div，其中有一列 <pre><code>col-xs-12</code></pre> 类，这意味着即使在最小的（手机）尺寸上它也将占据整个宽度。这应该可以帮助你开始。 </p> <pre><code><div class="container"> <div class="row"> <div class="col-md-6"> <img src="http://c7.nrostatic.com/sites/default/files/uploaded/donald-trump-bankruptcy-lies-r.jpg" style="width:200px; height:200px;"/></div> <div class="col-md-6"><p>Bacon ipsum dolor amet pancetta jowl filet mignon capicola ball tip jerky. Capicola t-bone filet mignon ball tip pork loin beef ribs bresaola pancetta shank biltong andouille porchetta ham hock short loin pastrami. Meatball frankfurter leberkas tenderloin brisket sausage salami ribeye ham ham hock andouille rump venison bacon. Drumstick tri-tip shoulder pork chop kielbasa tenderloin sausage prosciutto short ribs frankfurter hamburger t-bone chuck. Turducken pig meatloaf, meatball swine short ribs t-bone jerky. Strip steak cow boudin, sirloin leberkas pork chop frankfurter t-bone jowl rump tri-tip alcatra. Prosciutto meatball salami picanha pig.</p></div> </div> <div class="row"> <div class="col-xs-12"> <p>Bacon ipsum dolor amet pancetta jowl filet mignon capicola ball tip jerky. Capicola t-bone filet mignon ball tip pork loin beef ribs bresaola pancetta shank biltong andouille porchetta ham hock short loin pastrami. Meatball frankfurter leberkas tenderloin brisket sausage salami ribeye ham ham hock andouille rump venison bacon. Drumstick tri-tip shoulder pork chop kielbasa tenderloin sausage prosciutto short ribs frankfurter hamburger t-bone chuck. Turducken pig meatloaf, meatball swine short ribs t-bone jerky. Strip steak cow boudin, sirloin leberkas pork chop frankfurter t-bone jowl rump tri-tip alcatra. Prosciutto meatball salami picanha pig.</p> </div> </div> </div> </code></pre> </answer> </body></html>
您好，我是新人，我想更改导航栏中字体的颜色，但找不到任何解决方案，这是代码： 您好，我是新人，我想更改导航栏中字体的颜色，但找不到任何解决方案，这是代码： <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">testteee</a> </div> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">About</a></li> <li><a href="#">Portofolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <main> <header> <p>teste</p> </header> </main> CSS： body { background-color: grey; } .navbar { background-color: purple; border: transparent; box-shadow: 0px 0px 0px 2px grey; margin: 0; } main { width: 60%; background-color: white; margin: 0 auto; box-shadow: 0.5px 0.5px 0.5px 0.5px grey; } 任何额外的提示都会对我的发展很有帮助:) 这可能是您所需要的，但我建议您从 sass/scss 变量中更改它。这可能是一个很长的路，因为你必须学习如何在nodejs环境中构建bootstrap css文件，this可以帮助你。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> body { background-color: grey; } .navbar-custom { background-color: purple; border: transparent; box-shadow: 0px 0px 0px 2px grey; margin: 0; } .navbar-custom .navbar-header a, .navbar-custom .navbar-header a:hover { color: #fff; } .navbar-custom ul.navbar-nav li a:hover { background-color: gray; color: #fff; } .navbar-custom ul.navbar-nav a { color: #fff; } .navbar-custom ul.navbar-nav a:hover { color: blue; } main { width: 60%; background-color: white; margin: 0 auto; box-shadow: 0.5px 0.5px 0.5px 0.5px grey; } </style> </head> <body> <nav class="navbar navbar-default navbar-custom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Logo</a> </div> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">About</a></li> <li><a href="#">Portofolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <main> <p>main content</p> </main> </body> </html> 另外，我认为这是一个不好的做法，并且它无法扩展使用！重要。 您可以阅读有关 何时使用 important 的内容，或许还有一些 css 特异性 :) 在 CSS 中使用颜色来更改字体颜色。 .navbar { background-color: purple; border: transparent; box-shadow: 0px 0px 0px 2px grey; margin: 0; } a{color:red;} 如果您正在使用框架并需要更改它，请使用！重要。 !重要的是改变已经设置的样式。 .navbar { background-color: purple; border: transparent; box-shadow: 0px 0px 0px 2px grey; margin: 0; } a{color:red!important;} 您可以将字体颜色添加到导航CSS中{color: #fff}，或者如果您只想更改链接的文本颜色，则例如.navbar a {color: #fff}。您可以对链接的所有变体执行相同的操作 .navbar a, .navbar a:hover, .navbar a:visited {color: #fff} 您可以将颜色附加到导航栏类，例如颜色：#whatevercoloryouchoose 它应该看起来像这样 .navbar { color: #whatevercoloryoulike; background-color: purple; border: transparent; box-shadow: 0px 0px 0px 2px grey; margin: 0; } 如果您使用选项卡：这对我有用： .mdc-tab__text-label { color: white; }
我正在使用 Bootstrap 5 和 NGX-Bootstrap 构建 Angular 12 应用程序。我想创建一个默认情况下处于活动状态但可折叠的侧面导航栏。是否可以使用 Bootstrap 5 来实现这一点
我有一个div，如果用户单击一个复选框（是），我想显示它；如果用户单击其他复选框（否），则隐藏它 我如何使用 javascript、jquery 或 css 代码来显示和隐藏 div ...
如何使用SASS自定义Bootstrap 5.3中的警报组件？
我对 $primary 和 $ secondary 变量进行了更改。这改变了我测试的所有组件，如按钮、卡片、导航栏。但它不会改变警报的颜色。这是我的习惯...