twitter-bootstrap 相关问题

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

无法通过 Javascript 和 AJAX 显示/隐藏跨度微调器？

我正在尝试在联系表单的提交按钮上显示和隐藏微调器。提交表单时，旋转器应显示在按钮上。一旦提交表格，旋转...

javascript jquery css ajax twitter-bootstrap

回答 1 投票 0

如何在引导程序中设置下拉项的宽度？

我必须在导航栏的右侧添加一个小下拉菜单。我试图通过添加一个设置宽度的新 CSS 类来设置元素的宽度，但我尝试的任何方法都不起作用。我必须在导航栏的右侧添加一个小下拉菜单。我试图通过添加一个设置宽度的新 CSS 类来设置元素的宽度，但我尝试的任何方法都不起作用。 <li class="nav-item dropdown"> <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle"> some text </a> <div aria-labelledby="navbarDropdownLangMenu" class="dropdown-menu"> <a class="dropdown-item">AA</a> <a class="dropdown-item">BB</a> </div> </li> 除了元素的宽度之外，一切都工作正常。每个链接只有两个字符，但宽度很大，超出了屏幕的宽度：引导程序的下拉菜单中有一个最小宽度。您可以像这样重置它： .dropdown-menu { min-width:inherit; } 试试这个： .navbar .dropdown-menu.show { min-width: inherit; display: inline-block; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item">AA</a> <a class="dropdown-item">BB</a> </div> </li> </ul> </div> </nav> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>

css twitter-bootstrap

回答 3 投票 0

打开时模态内的模态，仅先关闭 - Bootstrap

我在模态中创建了引导模态，首先打开主模态，然后在模态中打开子模态，但是当我关闭它时，应该首先关闭子模态，然后关闭父模态...

javascript jquery html css twitter-bootstrap

回答 3 投票 0

Bootstrap 3.0 弹出窗口和工具提示

我是 Bootstrap 新手，我无法让弹出窗口和工具提示功能正常工作。我对下拉菜单和模型没有任何问题，但我似乎缺少弹出框和

javascript jquery css twitter-bootstrap

回答 8 投票 0

在Astro中导入Bootstrap

我目前正在开发 Astro (astro.build)，并希望将其与最新的 Bootstrap 版本一起使用。有谁了解 Astro 并且可以向我解释如何正确集成 Bootstr...

twitter-bootstrap integration bootstrap-5 astrojs

回答 3 投票 0

data-dismiss="modal" 关闭 MVC 部分视图中同一页面上所有打开的模态对话框

我正在研究两个不同的部分视图，它们是一起工作的。当在一个页面上使用多个模态时，同时打开彼此之上，使用 data-dismiss="...

javascript c# jquery twitter-bootstrap

回答 4 投票 0

引导颜色选择器在更改时不更新值

我正在使用引导程序制作一个表单，输入之一是颜色选择器元素。当用户选择颜色时，值属性保持不变。看来价值属性仍然是原来的样子

javascript html jquery twitter-bootstrap

回答 1 投票 0

转到 Bootstrap 选项卡内的锚文本

我正在尝试创建一个 URL 链接，用于在特定元素（表单）处打开特定页面。但该元素位于该页面的引导选项卡内。为了打开正确的选项卡，我遵循了...

javascript html twitter-bootstrap tabs anchor

回答 1 投票 0

如何更改此轮播标题类的 CSS 样式？

我有一个本地开发的 WordPress 主题，轮播标题就像后面有一个黑色透明条，从头到尾占据了整个浏览器。 CSS 样式是这样的： .汽车...

jquery html css wordpress twitter-bootstrap

回答 1 投票 0

Bootstrap 5 类“me-auto”的含义是什么

这是 bootstrap 5 导航栏 ul 部分代码。我的问题是：我无法从左到右更改 ul 位置。 bootstrap 5类“me-auto”的含义是什么家 ...

twitter-bootstrap bootstrap-5

回答 10 投票 0

我想使第一行之后的列如此 col-md-6 即使具有动态内容也具有相同的高度（转到整页）。页面标题</title&g...</desc> <question vote="9"> <p>我想使第一行之后的列，因此 col-md-6 即使具有动态内容也具有相同的高度（转到整页）。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2ecf2ee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a849a86">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </head> <body> <div class="col-xs-3"> <div class="row"> <div class="col-md-6"> <div class="shadow p-3 mb-5 bg-white rounded"> <div class="container"> <div class="row"> <div class="col-md-6"> -Icon- </div> <div class="col-md-6"> <p>Date</p> </div> </div> </div> <p>Author</p> <div class="row"> <div class="col-md-6"> <p>Time</p> </div> <div class="col-md-6"> <div> </div> </div>   </div> </div> </div> <div class="col-md-6"> <div class="shadow p-3 mb-5 bg-white rounded"> <div class="container"> <div class="row"> <div class="col-md-6"> -Icon- </div> <div class="col-md-6"> More stuff than possible  </div> </div> </div> <p>Author</p> <div class="row"> <div class="col-md-6"> <p>Time</p> </div> <div class="col-md-6"> <div> </div> </div> </div> </div> </div>  </div> </div> </body> </html></code></pre> </div> </div> <p></p> </question> <answer tick="true" vote="13"> <p>将 <pre><code>h-100</code></pre> 或 <pre><code>height: 100%;</code></pre> 添加到两列的 <pre><code>col-md-6</code></pre> 列开头的第一个子项。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="9efcf1f1eaedeaecffeedeabb0aeb0ac">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="9af8f5f5eee9eee8fbeadaafb4aab4a8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </head> <body> <div class="col-xs-3"> <div class="row"> <div class="col-md-6"> <div class="shadow p-3 mb-5 bg-white rounded h-100"> <div class="container"> <div class="row"> <div class="col-md-6"> -Icon- </div> <div class="col-md-6"> <p>Date</p> </div> </div> </div> <p>Author</p> <div class="row"> <div class="col-md-6"> <p>Time</p> </div> <div class="col-md-6"> <div> </div> </div>   </div> </div> </div> <div class="col-md-6"> <div class="shadow p-3 mb-5 bg-white rounded h-100"> <div class="container"> <div class="row"> <div class="col-md-6"> -Icon- </div> <div class="col-md-6"> More stuff than possible  </div> </div> </div> <p>Author</p> <div class="row"> <div class="col-md-6"> <p>Time</p> </div> <div class="col-md-6"> <div> </div> </div> </div> </div> </div>  </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>这是完全正确的并解决了我的问题非常感谢</p> </answer> </body></html>

html css twitter-bootstrap bootstrap-5

回答 0 投票 0

如何使用 React 和 Bootstrap 将 JSX 组件在网页上左对齐？

我目前正在开发一个 React 项目，我使用 Bootstrap 来设计我的组件。我有一个 JSX 组件，我想将其与网页左侧对齐，但由于某种原因，它不起作用。

css reactjs twitter-bootstrap bootstrap-4 frontend

回答 1 投票 0

Bootstrap 5 的按钮文本是黑色的，而不是像他们的演示那样是白色的

我不确定这是否是我在安装 Bootstrap 5 时做错的事情，但我的很多按钮都使用黑色字体，而不是 Bootstrap 5 文档中看到的白色字体对于

javascript css twitter-bootstrap laravel-8 bootstrap-5

回答 3 投票 0

使用 bootstrap css 打印

我有一个带有 bootstrap css 布局的页面。我正在尝试打印表格。然而，该表看起来与屏幕上的完全不同。我包含这样的 css 文件：对我来说不起作用。 <link ../bootstrap.min.css' rel='stylesheet' media='all'> 对我来说，所有这些方法都不起作用。使用此代码 @media print { .bg-primary th { background-color: transparent !important; box-shadow: 0 0 0 1000px #095075 inset !important; } }

twitter-bootstrap printing-web-page

回答 1 投票 0

Bootstrap 正在捕获下拉菜单上的 ArrowDown，而无需传播

我的问题是我无法按 ArrowDown 键浏览 .items。看起来 Bootstrap 正在捕获非传播的密钥。例如，如果我更改 ArrowDown，我可以导航。我是…

twitter-bootstrap bootstrap-5

回答 1 投票 0

Bootstrap-select，顶部选择和 jQuery 可排序集成

我正在为一个项目使用 Bootstrap-Select，但我遇到了多个列表的问题。我的应用程序必须满足以下要求。更新：基于@caseyjhol很好的答案，我开始尝试......

javascript jquery twitter-bootstrap jquery-ui bootstrap-select

回答 2 投票 0

如何在 Bootstrap 中将表格水平居中

这是我的代码。我想做的是将这张桌子放在容器的中心。但相反，当我使用“容器”类时，它默认向左对齐，并且它使用完整的

html twitter-bootstrap

回答 8 投票 0

使用 CSS 的带有圆角边框的表格

我有一个问题。我有一个用纯 HTML 代码制作的表格，如下： ... 我有一个问题。我有一个用纯 HTML 代码制作的表格，如下： <table id="calendarTable"> <tr> <th id="tableHeader" colspan=7></th> </tr> <tr> <th>Dom</th> <th>Seg</th> <th>Ter</th> <th>Qua</th> <th>Qui</th> <th>Sex</th> <th>Sáb</th> </tr> <tbody id="tableBody"></tbody> <tr> <td colspan=7> <p> <form id="dateChooser" name="dateChooser"> <select name="chooseMonth" onChange="populateTable(this.form)"> <option selected>Janeiro <option>Fevereiro <option>Março <option>Abril <option>Maio <option>Junho <option>Julho <option>Agosto <option>Setembro <option>Outubro <option>Novembro <option>Dezembro </select> <select name="chooseYear" onChange="populateTable(this.form)"> </select> </form> </p> </td> </tr> </table> 这是我的CSS： #calendarTable { text-align: center; width: 80%; height: 100%; color: #18B6E6; border-color: #18B6E6; border: solid 1px; border-radius: 20px; } #calendarTable td { border: solid 1px; border-radius: 4px; } #calendarTable th { border: solid 1px; font-weight: 700; } 我想仅使用 CSS 来圆化边框，我只是尝试使用 border-radius 属性，但我的表格没有更改边框。有人给我建议吗？提前致谢！这是一个应用了边框半径的简化表格。诀窍是设置单元格的左边框而不是表格本身。不管有没有 thead，它都可以工作，并且我已经注释了 css 以显示我正在做什么。 /* * First normalise some of the attributes */ table td, table th { padding: .5rem; text-align: left; vertical-align: top; } /* * Add the border, set border spacing etc * The left width is 0 so cell border can be applied without doubling up. */ .table-bordered { border: 1px solid silver; border-left-width: 0; border-collapse: separate; border-spacing: 0; border-radius: 1rem; } /* * Add the border to table cell/header */ .table-bordered td, .table-bordered th { border-top: 1px solid silver; border-left: 1px solid silver; } /* * Remove the top border from the first header/cell */ .table-bordered tbody:first-child tr:first-child td, .table-bordered thead:first-child tr:first-child th { border-top-width: 0; } /* * Set the border radius for the first header/cell */ .table-bordered thead:first-child tr:first-child td:first-child, .table-bordered thead:first-child tr:first-child th:first-child { border-top-left-radius: 1rem; } /* * Set the border radius for the last header/cell */ .table-bordered tbody:last-child tr:last-child td:first-child, .table-bordered tbody:last-child tr:last-child th:first-child { border-bottom-left-radius: 1rem; } <table class="table-bordered"> <thead> <tr> <th scope="col">Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <th scope="row">Data</th> <td>Data</td> <td>Data</td> </tr> <tr> <th scope="row">Data</th> <td>Data</td> <td>Data</td> </tr> <tr> <th scope="row">Data</th> <td>Data</td> <td>Data</td> </tr> </tbody> </table> 正如其他人所说，这是应该给出您想要的外观的代码。代码 #RoundedTable { border: 1px solid black; border-radius: 10px; } #RoundedTable td, #RoundedTable th { border: 1px solid gray; border-radius: 10px; padding: 3px; } <table id="RoundedTable"> <tr><th>Table header</th><th>Another header cell</th></tr> <tr><td>Table cell...</td><td>More data...</td></tr> <tr><td>Table cell...</td><td>More data...</td></tr> <tr><td>Table cell...</td><td>More data...</td></tr> <tr><td>Table cell...</td><td>More data...</td></tr> </table> 注意事项为此，您需要确保将表格的 border-collapse 设置为 separate 而不是 collapse。否则，单元格的半径和整个表格的半径都不起作用。因此请查看可能影响您的表格的其他 CSS。如果您在任何地方发现 border-collapse: collapse;，那就是问题所在。 #calendarTable{ border-radius:20px; } 演示删除表格上的边框属性。浏览器仍然支持它，但它已从 HTML5 规范中删除。无论如何，属性产生的效果可能不是你想要的。如果您想要表格中每个单元格周围都有边框，只需在 CSS 中指定并在其中包含边框半径即可。即 #calendarTable td { border: solid 1px; border-radius: 4px; } 如果您只想在整个表格周围添加边框，请在表格选择器上使用相同的 CSS： #calendarTable { border: solid 1px; border-radius: 4px; } border-radius 似乎适用于 table 和 td 元素，无论 border 上有或没有 table 属性。您必须有一些其他 CSS 规则发挥作用。 table { border: 1px solid blue; border-radius: 10px; } table td, table th { border: 1px solid gray; border-radius: 10px; padding: 5px; } <table border=1> <tr> <th>Table header...</th> </tr> <tr> <td>Table cell...</td> </tr> <tr> <td>Table cell...</td> </tr> <tr> <td>Table cell...</td> </tr> <tr> <td>Table cell...</td> </tr> </table> 基于on作为顺风： .table-bordered { @apply w-full border-separate border-spacing-0 overflow-clip rounded-lg border border-l-0; } .table-bordered td, .table-bordered th { @apply border-l border-t text-left align-top; } .table-bordered tbody:first-child tr:first-child td, .table-bordered thead:first-child tr:first-child th { @apply border-t-0; } .table-bordered thead:first-child tr:first-child td:first-child, .table-bordered thead:first-child tr:first-child th:first-child { @apply rounded-tl-lg; } .table-bordered tbody:last-child tr:last-child td:first-child, .table-bordered tbody:last-child tr:last-child th:first-child { @apply rounded-bl-lg; }

html css twitter-bootstrap

回答 6 投票 0

Bootstrap popover：更改动态创建的元素上的popover的内容

我在静态元素上使用了这个弹出窗口脚本，效果很好： $(".popover-class").popover({ 标题：获取标题，内容：'正在加载...', html：正确， ...

jquery twitter-bootstrap popover

回答 3 投票 0

在我的 HTML 页面中包含 bootstrap

我有这行非常简单的代码。我刚刚开始做一些 Javascript 编码，但我无法完成这项工作。你能告诉我为什么吗？ <p>我有这行非常简单的代码。我刚刚开始做一些 Javascript 编码，但我无法完成这项工作。你能告诉我为什么吗？</p> <pre><code><html> <head> <script src="bootstrap.min.js"></script> <title>My Website</title> </head> <body> <p>This is an example of a paragraph.</p> <button type="button" class="btn btn-danger">Danger daw!</button> </body> </html> </code></pre> <p>引导程序未出现在页面上。</p> </question> <answer tick="true" vote="3"> <p>Bootsrap 有 Javascript、CSS 和可选主题。从引导站点上的<a href="http://getbootstrap.com/getting-started/" rel="nofollow">入门</a>链接，您可以看到以下代码，其中包含所有这些内容。如果您自己托管文件，只需更新文件的路径即可。 </p> <pre><code> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </code></pre> </answer> <answer tick="false" vote="0"> <p>你应该包含css文件路径，这里我使用了<pre><code>BootstrapCDN</code></pre>。并尝试从<a href="http://www.w3schools.com/bootstrap/" rel="nofollow">here</a>了解引导程序。我希望这有帮助。</p> <pre><code> <html> <head> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <title>My Website</title> </head> <body> <p>This is an example of a paragraph.</p> <button type="button" class="btn btn-danger">Danger daw!</button> </body> </html> </code></pre> </answer> <answer tick="false" vote="0"> <p>Bootstrap 需要 jquery 作为依赖项。</p> <p>按照rdn87的建议使用以下代码</p> <pre><code> <!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Bootstrap</h1> <p>Text goes here</p> </div> </body> </html> </code></pre> </answer> <answer tick="false" vote="0"> <p>将此添加到您的 <pre><code>head</code></pre> 标签之间：</p> <pre><code><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </code></pre> </answer> <answer tick="false" vote="0"> <p>您错过了包括<strong>CSS</strong>。</p> <pre><code><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </code></pre> </answer> </body></html>

javascript html css twitter-bootstrap

回答 0 投票 0

twitter-bootstrap 相关问题

最新问题