twitter-bootstrap 相关问题

如何使用 bootstrap 为 <li> 创建下拉菜单

我需要为一个 元素制作下拉菜单 ... 我需要为一个 <li> 元素制作下拉菜单 <div class="head-nav"> <span class="menu"></span> <ul class="cl-effect-15"> <li><a href="index.php" data-hover="HOME">HOME</a></li> <li><a href="about.php">ABOUT</a></li> <li><a href="contact.php" data-hover="CONTACT">CONTACT</a></li> <li><a href="#" data-hover=" "> </a></li> <li><a href="3" data-hover=" "> </a></li> <li class="pull-right"><a href="#" data-hover="More option" tabindex="-1">More options</a> <ul class="dropdown-menu"> <li><a href="#" data-hover=" ">one</a></li> <li><a href="3" data-hover=" ">two</a></li> </ul> </li> <li class="pull-right"><a href="logout.php" data-hover="logout">logout</a></li> <div class="clearfix"> </div> </ul> </div> 但子菜单未打开 使用Bootstrap v3.1.1 注意：即使在jquery之后添加也不起作用 你必须使用 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> 在您的代码中，您错过了 li 标签的“dropdown”类。 为了正确的下拉菜单，你必须使用这个语法： <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Item Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <!--- Put your menu-item here --> </ul> </li> 您可以参考 Bootstrap 文档这里 该问题是由于标签 a 中缺少 data-toggle="dropdown" 引起的 也许您搜索这个解决方案：JSBin 例如： 您需要添加内容：attr(data-hover);在你的 before 元素上。 HTML： <li class="HOVER"><a href="#" data-hover="More option" tabindex="-1">More options</a> CSS： .HOVER { border: solid 7px #000; padding: 20px; text-transform: uppercase; font-weight: bold; color: #fff; position: relative; width: 300px; } .HOVER:hover a:before { content: attr(data-hover); color: red; display: block; background: #000; position: absolute; top: 100%; left: -7px; right: -7px; padding: 15px; } 您缺少以下属性： class="dropdown-toggle" data-toggle="dropdown" 这些属性位于您想要成为下拉列表“挂钩”的元素上。 下面的示例标记： <li class="dropdown"> <a href="#lala" class="dropdown-toggle" data-toggle="dropdown" > Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="listbox"> <li><a href="#lala1" role="option">jmeter</a></li> <li><a href="#lala2" role="option">EJB</a></li> <li><a href="#lala3" role="option">Jasper Report</a></li> <li class="divider"></li> <li><a href="#" role="option">Separated link</a></li> <li class="divider"></li> <li><a href="#" role="option">One more separated link</a></li> </ul> </li> 编辑 这是一个例子Fiddle；请注意，如果删除 data-toggle="dropdown"，代码将无法工作。 :) 要显示下拉列表，您只需将下拉容器设置为默认隐藏，并使用 CSS ':hover' 伪类在悬停时显示容器，如下所示： <li class="dropdown " id="myMenuList"> <a href="#lala" class="dropdown-toggle" data-bs-toggle='dropdown'> Account <b class="caret"></b> </a> <ul class="dropdown-menu" role="listbox" id="myDropdowns"> <li><a href="#lala1" role="option">jmeter</a></li> <li><a href="#lala2" role="option">EJB</a></li> <li><a href="#lala3" role="option">Jasper Report</a></li> <li class="divider"></li> <li><a href="#" role="option">Separated link</a></li> <li class="divider"></li> <li><a href="#" role="option">One more separated link</a></li> </ul> </li> 这是CSS #myDropdowns { display: none; } #myMenuList:hover #myDropdowns { display: block;}

获取 Bootstrap 的 typeahead 的选定项目值

Bootstrap 刚刚实现了一个简洁的自动完成功能，称为 typeahead。我无法获取文本输入的适当值。 例如，我可能有以下内容： $('输入')...

使用 Bootstrap 使表格标题显示在底部

我正在声明一个带有标题的表格： ... 我正在声明一个带有标题的表格： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <caption>Why does this display below contents?</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 但是，即使 caption 元素是 table 的第一个子元素，当我使用 Bootstrap 类时，标题会显示在表格下方。 如何将其移动到桌子上方？ 那是因为从版本 4 开始，Bootstrap 有了默认的标题 css 样式 - caption-side: bottom 当您更改caption-side: top;时，您的标题将显示在表格顶部。 更新 从版本5开始，您还可以使用<caption>将.caption-top放在桌子顶部： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered caption-top"> <caption>Caption displayed above contents</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

自定义bootstrap 5按钮颜色和属性

我在我的项目中创建了我的custom.scss，并完成了以下操作： $主要：#e84c22； $主题颜色: ( 主要：$主要， ）； @import“~bootstrap/scss/bootstrap.scss”； 到目前为止，颜色就像...

Chart.js 图表在 ngIf 内时不显示。

我在使用 Chart.js 创建的引导面板中有一个简单的散点图。它工作/显示得很好，直到我将它放入 ngIf div 中。有人遇到过这个吗？关于如何...

在 Bootstrap Modal 上捕获关闭事件

我有一个 Bootstrap Modal 来选择事件。 如果用户单击 X 按钮或模式之外，我想将它们发送到默认事件。 我怎样才能捕获这些事件？ 这是我的 HTML ...

引导行上的负边距

Bootstrap 行的边距（左侧和右侧）为 -15px。 据我了解，这主要有两个原因： .container 的内边距（左和右）为 15px col-* 的间距为 15px。 所以...

Bootstrap 4 - 右对齐导航栏项目[重复]

我正在尝试将我的导航栏项目与 Bootstrap 4 alpha 6 中的右侧对齐。 我希望一切都正确对齐，除了品牌/标题之外。 这就是我的代码的样子： 我正在尝试将我的导航栏项目在 Bootstrap 4 alpha 6 中向右对齐。 我希望所有内容都正确对齐，除了品牌/标题之外。 这就是我的代码的样子： <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav> 您可以将 .justify-content-end 添加到 .navbar-collapse 元素。我假设您还想将移动切换菜单项移至右侧。为此，请将 .align-items-end 添加到 .navbar-nav <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Oliver</a> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav align-items-end"> <a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav>

引导汉堡菜单在单击时在移动设备上向右移动，导致水平滚动和空白

我有一个用 Bootstrap 构建的网站，它在桌面上运行良好。但是，当我在移动设备（android + chrome）上打开它时，单击“f”后，汉堡菜单会向右移动...

如何自定义 Bootstrap 轮播控件

您能否让我知道如何自定义 Bootstrap Carousel 控件，例如我想更改控件的大小或背景颜色以及如何将背景图像添加到 co...

猫头鹰旋转木马未出现

我正在努力让猫头鹰的事情继续下去，它确实让我重新开始了一个项目。 我正在努力让猫头鹰的事情继续下去，它确实让我重新开始了一个项目。 <html> <head> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> </head> <body> <script src="js/jquery-1.11.3.js"></script> <script src="js/owl.carousel.min.js"></script> <script> $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }) </script> <div class="owl-carousel"> <div class="item"><img src = "img/bg1.jpg"></div> <div class="item"><img src = "img/bg2.jpg"></div> <div class="item"><img src = "img/bg3.jpg"></div> <div class="item"><img src = "img/bg4.jpg"></div> <div class="item"><img src = "img/bg5.jpg"></div> <div class="item"><img src = "img/bg6.jpg"></div> <div class="item"><img src = "img/bg7.jpg"></div> <div class="item"><img src = "img/bg8.jpg"></div> <div class="item"><img src = "img/bg9.jpg"></div> <div class="item"><img src = "img/bg10.jpg"></div> <div class="item"><img src = "img/bg11.jpg"></div> <div class="item"><img src = "img/bg12.jpg"></div> </div> </body> </html> 我做错了什么？ 这是工作代码，您在配置中错过了 autoplay 属性 $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, autoPlay: 1000, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }) }); <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> <div class="owl-carousel"> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> <div class="item"><img src = "http://placehold.it/350x150"></div> </div> 只需在CSS中添加这部分即可解决您的问题 .owl-stage-outer{ direction: ltr; }

如何更改文本框的大小，使其在asp.net core默认模板中变长

我正在尝试制作一个所需输入较大的表单。而默认的 大小还不够。我尝试了 size="" 和 width="" 但它没有给出任何改变。我是你...

滑块无法与 Bootstrap-RTL 一起使用

当我使用正常的 bootrap css 加载滑块时，它工作正常： 但是当我用 rtl css 文件加载它时 - 照片正在改变......

引导表单内联样式不接触

我有以下 HTML： 我有以下 HTML： <form class="form-inline" role="form"> <div class="form-group"> <input class="form-control" type="text" placeholder="Your comments" /> </div> <div class="form-group"> <button class="btn btn-default">Add</button> </div> </form> 我面临的问题是这两个元素没有占据整条线（它们没有接触）。请看这里： [![在此处输入图像描述][1]][1] 为什么会这样？ 有几件事： form-group是display:block。 将输入和按钮标签放在同一个表单组中 表单控件也是一个显示：块。 使用 CSS 强制其显示：inline-block 并缩短宽度（原来是 100%）。 jsfiddle：https://jsfiddle.net/b6x12fc8/ <div class="form-group"> <input class="form-control" type="text" placeholder="Your comments" /> <button class="btn btn-default">Add</button> </div> .form-inline .form-control { width:75%; display:inline-block;} 给出以下CSS。因为目前它会采用 width:auto; 所以，它将采用输入字段的默认宽度。 使其与按钮接触。给出 100% 并且给出了填充，因此，它将增加更多宽度并与按钮重叠。所以，删除填充但是padding:0 .form-inline .form-control { padding: 0; width: 100%; } https://jsfiddle.net/pyfetd4p/1/ 要在小屏幕上并排使用以下 css； .form-inline { display: flex; } 小提琴链接

Bootstrap和bootbox：动态改变确认窗口的宽度

我正在将 Bootstrap 用于 Web 应用程序，并使用 bootbox (http://bootboxjs.com) 在继续删除操作之前显示一个窗口。 对于不同的删除选项，我需要显示

引导模式事件未触发

我想在我的模式被关闭后简单地做一些逻辑。 在模式中我有一个按钮： 保存查... 我想在我的模式被关闭后简单地做一些逻辑。 在模式中我有一个按钮： <button type="button" class="btn btn-primary" onclick="$('#mymodal').modal('hide');">Save changes</button> 在视图中，我正在等待事件被触发，但它永远不会被触发。 $('#mymodal').on('hide.bs.modal', function (e) { alert('event fired') }); 我尝试在 chrome 开发工具中放置断点，该事件仅在第一次加载视图时触发。此后，再也不会到达断点。我是不是做错了什么？ 顺便说一句，模态正在按照我想要的方式隐藏。 在你看来，你需要添加 dom 就绪函数并在其中编写代码， $(function(){ // let all dom elements are loaded $('#mymodal').on('hide.bs.modal', function (e) { alert('event fired') }); }); 工作演示 虽然接受的答案是正确的，但我的情况略有不同，但我没有找到答案。 我正在动态创建模态，因此它们在页面加载时不存在。我使用 JQuery .append('body') 将它们添加到 DOM 中。因此 $('#mymodal').on('hide.bs.modal', function(e) { 不起作用......我不得不将我的事件侦听器更改为 $(document).on('hide.bs.modal', '#mymodal', function(e) { 去工作。希望这能帮助其他和我有同样情况的人。 确保您的页面中确实包含 Bootstrap Javascript 库。那是我的问题。 Bootstrap 文档暗示了这一点，但他们从代码示例中省略了它。 这里是它的文件/CDN，因为出于某种原因，他们的网站避免从大多数相关页面链接它：https://getbootstrap.com/docs/4.1/getting-started/download/ 使用 React 更新 2024 Bootstrap 5 我们可以使用 useEffect 来监听关闭、打开模态事件 useEffect(() => { document .getElementById("login-modal") .addEventListener("hidden.bs.modal", function (event) { console.log("close ok"); }); }, []);

网页使用滑动滑块后出现水平滚动条

我正在使用 slick 创建一个滑块。当我在光滑容器内使用两个 div 标签时，水平滚动条不会出现。但是当我在 slick 中使用两个以上的 div 时，hori...

Twitter bootstrap 选择只读仍然可以更改选项

我有一个带有 readonly="true" 的引导选择，但我仍然可以更改所选选项。 我需要禁用=“true”行为，但是当我使用它时，选择不会提交。 我需要一个组合...

如何为引导导航栏添加动态焦点？

嗨，我正在使用wordpress和bootstrap，我想在wp_list_pages()中添加活动类，但我尝试了很多东西都徒劳，我需要帮助。 我还使用了 data-toggle="pills" 但停止了所有 javascript...

如何将 Bootstrap 与 Django 一起使用？

我正在从 PHP 学习 python 和 Django。这一切都非常令人兴奋，我很乐意使用 Bootstrap 和 Django 来创建漂亮的网页。 据我了解（我正在关注 Django tut...