twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？ <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">  <link rel="stylesheet" href="css/Style.css"> </head> <body> <div class="container"> <div class="rainbow"> <img src="img/header.png" alt="DayCare" /> </div> </div>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 我在 Bootstrap 2.3 上进行了测试，运行良好。将 'img-responsive` 类添加到 img... <img src="img/header.png" class="img-responsive" alt="DayCare" /> 您可以像这样轻松完成： <img src="img/header.png" style="width:100%; height:auto; display:block;" /> 如果标题图片的宽度小于屏幕宽度，则应在样式中添加 max-width，以在大视图中保持标题的原始宽度。例如，假设 header 的原始宽度是 600px，img 应该是这样的： <img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" /> 同意 Skelly 的观点，img 响应式效果很好。我尝试使用此代码（删除 Style.css），工作正常。 <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> </head> <body> <div class="container"> <div class="rainbow"> <img class="img-responsive" src="bootstrap/resources/img/charpente/toulenne/IMGP0110.JPG" alt="DayCare" /> </div> </div>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 尝试删除 Style.css

twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

引导多选不起作用

我正在尝试使用多选Bootstrap，我使用了以下代码，该代码也可以在他们的网站（http://davidstutz.github.io/bootstrap-multiselect/）中找到，它显示了多选按钮

twitter-bootstrap twitter-bootstrap-3 multi-select

回答 7 投票 0

ASP 服务器标记未呈现

我正在使用引导程序来折叠和展开策略的详细信息视图。我有下面的代码，我的服务器标签未解析为客户端 ID，并在 htm 中保持为 <%= details.ClientID %>...

asp.net twitter-bootstrap-3

回答 2 投票 0

如何使我的下拉菜单可滚动

目前我有一个下拉菜单，当用户将鼠标悬停在它上面时会弹出。下拉菜单当前显示 8 个链接。我想放置 21 个链接，但这会占据整个屏幕。怎么办...

html twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

引导程序溢出未正确对齐

我正在制作一个页面，在小屏幕（即手机）上我希望图像位于文本上方，而在较大屏幕上我希望图像位于文本右侧。我正在使用 offset 来拉动 im...

php twitter-bootstrap-3

回答 1 投票 0

在react-bootstrap中更改NavDropdown的颜色和背景颜色

在react-bootstrap中使用我的NavDropdown，我无法设置其颜色或背景颜色的样式...... 使用 NavDropdown 中的 react-bootstrap，我无法设置其颜色或背景颜色的样式... <NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" > <LinkContainer to="/about"> <MenuItem eventKey={3.1} className="text-center">About</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/products"> <MenuItem eventKey={3.2} className="text-center">Products</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/blog-index"> <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem> </LinkContainer> </NavDropdown> 我可以使用 style={{ fontSize: '130%' }} 更改字体大小，但我还想使用 .. 更改颜色和背景颜色 style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }} ...但是 color 和 backgroundColor 在括号内不起作用。我尝试做的一件事是将 <NavDropdown> 元素包装在样式 div 中，但这搞乱了导航栏元素的对齐方式。还可以提供标题文本作为 JSX 元素。 <NavDropdown title={ <span className="text-primary my-auto">Dropdown</span> } id="nav-dropdown" > <NavDropdown.Item>Action</NavDropdown.Item> <NavDropdown.Item>Another action</NavDropdown.Item> </NavDropdown> 并且不需要编写自定义 CSS，这可能是我们想要避免的。设置 NavDropdown 的 id 并为此 id 创建 css 样式。反应中： <NavDropdown title={"Example"} id="nav-dropdown"> 在 CSS 中： #nav-dropdown{ color: white; font-weight: bold; background-color: red; } 使用 Chrome 中的检查元素工具检查后。我通过在我的index.html中添加以下几行来使其工作' div.dropdown-menu.show { background-color: #000000; // for drop down menu color } a.dropdown-item { color: #ffffff; // for font color of individual drop down item } ` 对于您选择的选择器。您提供的代码结构中不存在这一点。您是如何想出选择器的？

css reactjs twitter-bootstrap-3 react-bootstrap

回答 4 投票 0

缩小整个引导页面

当我在 Chrome 中缩小到 80% 时，我的引导页面看起来不错。有没有办法修改css来缩小整个网站？

css twitter-bootstrap-3

回答 3 投票 0

引导程序对齐按钮旁边的文本框的问题

我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的HTML（我是引导程序的新手）我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的 HTML（我是引导程序的新手） <div class="row"> <div class="container"> <div class="col-lg-3"> </div> <div class="col-lg-6"> <p class="text-center"> <strong>Enter your email and get special information</strong> </p> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline col-lg-12" })) { <div class="input-group col-lg-9" style="margin-left: 3%"> <input type="text" class="form-control"> </div> <div class="input-group col-lg-2"> <button class="btn btn-primary">Submit</button> </div> } </div> <div class="col-lg-3"> </div> </div> </div> 本来应该是这样的但看起来像这样，理想情况下我希望按钮离文本框更近一点但是当我在移动屏幕上查看它时，我遇到了混乱如有任何帮助，我们将不胜感激。这个小提琴怎么样： http://jsfiddle.net/jwyr6Lwh/1/ .custom input.form-control { border: 1px solid #848484; -webkit-border-radius: 30px !important; -moz-border-radius: 30px !important; border-radius: 30px !important; -moz-box-shadow: 2px 2px 1px #666; -webkit-box-shadow: 2px 2px 1px #666; box-shadow: 2px 2px 1px #666; outline:0; padding-left:10px; padding-right:0px; background-color: rgba(255,255,255,0.2); } .custom button { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 在移动浏览器上显示不同的原因是它的响应能力 class="col-lg-2" 意味着在大型设备上它将显示在两列中，否则一列在另一列下面。如果您不打算这样做，请采取class="col-sg-2"。这个怎么样？ http://jsfiddle.net/ytn7z6tc/4/ <h3 id="btn-groups-single">Input + Button</h3> <div class="input-group"> <input type="text" class="form-control " placeholder="email address"> <div class="input-group-btn"> <button type="button" class="btn btn-primary"> Submit </button> </div> </div>

html css twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

Bootstrap 3 Glyphicons CDN

注意！在此拉取请求合并后，Bootstrap 图标又回来了。经过过去几周的反复思考，我决定恢复 Glyphicons 图标......

html css twitter-bootstrap cdn twitter-bootstrap-3

回答 5 投票 0

停用 Bootstrap 表中表行的悬停状态

有没有办法在 Bootstrap Table 中停用表行上的悬停状态？它会自动设置在那里...

css twitter-bootstrap-3 hover bootstrap-table

回答 2 投票 0

出现简单 HTML 中的滚动条

下面的代码显示了一个 HTML 滚动条。下面的代码显示了一个 HTML 滚动条。 <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body > <div class="container-fluid"> <div class="row"> <div id="oCol1" class="col-sm-12 col-xs-12 col-md-6"> <div class="table-responsive" style="width:100%"> <table style="width:100%; border: none" > <tr> <td> <div class="row"> <div class="col-sm-12"> Test </div> </div> </td> </tr> </table> </div> </div> </div> </div> </body> </html> 这是我能做到的最简单的 - 代码已生成。为什么我用这个 HTML 得到一个水平滚动条。我无法添加溢出：隐藏，因为在其他场景中会有广泛的内容 - 这种情况不是其中之一。水平滚动条的原因与引导程序有关。如果您检查表和行，您会发现 --bs-gutter-x: 0; 应用于导致问题的行，如果将其设置为 0，它将得到修复。添加这个.row{--bs-gutter-x: 0 !important;}，它就会得到修复。下面是相同的工作示例，如果我错过了某些内容，请分享。注意：下面运行时的垂直滚动条仅在 SO 中可见 .row { --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"> </script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h2 class="mainDiv"> <div class="container-fluid"> <div class="row"> <div id="oCol1" class="col-sm-12 col-xs-12 col-md-6"> <div class="table-responsive" style="width:100%"> <table style="width:100%; border: none"> <tr> <td> <div class="row"> <div class="col-sm-12"> Test </div> </div> </td> </tr> </table> </div> </div> </div> </div> </h2> <script> console.log("Welcome to CCE") </script> </body> </html>

css twitter-bootstrap-3

回答 1 投票 0

需要帮助在较小的屏幕上将“添加到购物车”按钮移动到 opencart v2.3 中产品页面上的描述选项卡上方

在opencart v2.3中，较小屏幕上的产品页面层次结构如下：标头产品图片描述和评论选项卡价格、选项、添加到购物车按钮页脚这种情况只发生在较小的s上...

javascript twitter-bootstrap-3 opencart opencart2.x opencart2.3

回答 1 投票 0

引导间距类不起作用

我正在尝试向我的 div/ul 添加间距，如 Bootstrap 实用程序文档中所示。但它根本不起作用，我什至无法在 Firebug 中跟踪该类。 http://v4-alpha.getbootstrap.com/

css twitter-bootstrap-3 padding margins

回答 6 投票 0

Bootstrap 中的嵌入 pdf 不是全高

我在此页面上嵌入的 pdf 出现问题。赞助该网站之前的版本是 html4，嵌入是使用这样的对象标签完成的我在此页面上嵌入的 pdf 出现问题。赞助这个网站之前的版本是html4，嵌入是用像这样的对象标签完成的 <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="700px"> <p>It appears you don't have a PDF plugin for this browser.</p> <p id="missing-pdf-plugin">You can <a href="pdf/GreekFestSponsorship2013.pdf">click here to download the PDF file</a>.</p> </object> 这是新代码 /* Flexible iFrame */ .flexible-container { position: relative; height: 0; overflow: hidden; } .flexible-container iframe, .flexible-container object, .flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Greek Festival Portsmouth NH</title>  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/custom.css" rel="stylesheet"> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">     <script src="https://use.fontawesome.com/a0aac8df13.js"></script> <meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The Glendi or party will begin on Friday, July 15th, July 16th and July 17th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land."> <meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2016, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation ,greek orthodox wine event, orthodox greek food and wine festivals, 2016 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2016, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates, greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music "> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> </head> <body> <div class="main-navigation-container navbar-fixed-top" id="primary-navbar"> <nav class="navbar"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="" title="PortsmouthGreekFestival.com">PortsmouthGreekFestival.com</a> </div>   <div class="collapse navbar-collapse" id="primary-navigation"> <ul class="nav nav-justified"> <li><a href="index.html">Home<span class="sr-only">(current)</span></a></li> <li><a href="Menu.html">Menu</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="events.html">Schedule of Events</a></li> <li><a href="sponsors.html">Sponsors</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav> </div> <header class="masthead"> <img src="images/Banner.jpg" alt="Portsmouth Greek Festival Logo"> </header>   <div class="container"> <h1>Sponsorship Opportunities</h1> <div class="flexible-container-embed"> <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="100%"> <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://portsmouthgreekfestival.com/pdf/GreekFestSponsorship2013.pdf">Download PDF</a></p> </object> </div> </div> <footer>  <div id="Copyright"> <p>Copyright © <script>document.write(new Date().getFullYear());</script> PortsmouthGreekFestival.com</p> </div> </footer>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script>  <script src="js/ie10-viewport-bug-workaround.js"></script> </body> </html> 您可以在此屏幕截图中看到 pdf 的高度为何不是 100%。您有 2 个额外的规则集可以按预期工作但是您需要... ...在 HTML 中更正此问题： <div class="flexible-container-embed"> 对此： <div class="flexible-container"> ...并将其添加到 .flexible-container CSS 规则集： padding-bottom: 100%; 添加这 2 个规则集时，将它们放入 <style> 元素中，然后将其添加到 <head> 元素内的最后一个位置。请访问下面的 Plunker 链接查看示例。 /* Flexible iFrame */ .flexible-container { position: relative; /* This blank line was probably: || padding-top: 56.25%; */ height: 0; overflow: hidden; } /* This ruleset says: || "Apply the following properties and their values to ANY `<iframe>`, || `<object>`, or `<embed>` THAT IS A CHILD OF any element with the || class of `.flexible-container`. */ .flexible-container iframe, .flexible-container object, .flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 当您应用这 2 个规则集时，您已经为包装 <object> 的 div 指定了 .flexible-container-embed 类，但这两个规则集都适用于具有 .flexible-container 类的元素，以及它的任何子级为 <iframe> 的元素、 <object> 或 <embed>。基本上，删除类名中的 -embed 部分。接下来是 padding-bottom 属性。通常为 56.25%，当应用于 iframe 容器时，适当的上下文可以保持 9 的高度和 16 的宽度。这对于宽屏幕格式视频来说很好，但对于 PDF 来说不太好，因为 PDF 可能具有长宽比为 8:11 或 72%（我在演示中使用了 100%，因为这是您所要求的，预计编辑将包含 72% 版本。）如果我们将填充与 height:0 结合起来，我们会得到一个类似于“shrinkwrap”的容器，根据内容的宽度调整其高度。更新：由于 PDF 插件添加了填充，从 100% 到 72% 没有明显的变化。我将<object>更改为<iframe>，因为它们更通用，您也可以使用<embed>。回顾这个PLUNKER 以 100% 的高度显示 PDF 文件是相当困难的。您可能想要采用 Bootstrap 的“响应式嵌入式媒体”方法，因为结果相当不错，而且麻烦也更少。 Chrome 中的结果： Firefox 中的结果：源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PDF</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello World!</h1> <div class="embed-responsive embed-responsive-4by3"> <object data="test.pdf" type="application/pdf"> <p> Your browser does not support embedded PDF files.<br> <a href="test.pdf">Click here to download the PDF file.</a> </p> </object> </div> </div> </body> </html> 请记住，并非所有浏览器都支持嵌入 PDF 文件，因此 <object> 标签内有此通知。

html css twitter-bootstrap twitter-bootstrap-3

回答 2 投票 0

在页面刷新/导航时保留 Twitter Bootstrap 折叠状态

我正在使用 Bootstrap“折叠”插件为一长串链接制作一个手风琴。 Accordion-body 标签包含“collapse”，因此页面加载时所有组都会折叠。当你打开...

javascript jquery twitter-bootstrap twitter-bootstrap-3

回答 10 投票 0

合理的按钮组在 Bootstrap 3 模式中无法正确呈现

我正在编写以下代码。为什么我无法在 Bootstrap 3 模式中呈现“合理按钮组”？ <p>我正在编写以下代码。为什么我无法在 Bootstrap 3 模式中呈现“合理的按钮组”？</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" style="padding:30px;">  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body" > <br /> <br /> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <button type="button" class="btn btn-default">Existing Customer</button> <button type="button" class="btn btn-default">New Customer</button> </div> <br /> <br /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div></code></pre> </div> </div> <p></p> </question> <answer tick="true" vote="1"> <p>文档包含您必须使用的特定注释 </p> <pre><code><a> </code></pre> <p>而不是 </p> <pre><code><button> </code></pre> <p><a href="http://getbootstrap.com/components/#btn-groups-justified" rel="nofollow">http://getbootstrap.com/components/#btn-groups-justified</a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" style="padding:30px;">  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body" > <br /> <br /> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <a type="button" class="btn btn-default">Existing Customer</a> <a type="button" class="btn btn-default">New Customer</a> </div> <br /> <br /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div></code></pre> </div> </div> <p></p> </answer> </body></html>

twitter-bootstrap twitter-bootstrap-3

回答 0 投票 0

如何在Bootstrap 3中添加Y滚动条折叠元素

我正在编写下面的代码。为什么我无法将 Y 滚动条添加到 Bootstrap 3 中折叠元素内的 .well 中？ @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/...

twitter-bootstrap css twitter-bootstrap-3

回答 1 投票 0

Bootstrap 3 选项卡无法正确切换活动状态

我有这段代码 - 只是选项卡式面板，每个选项卡式面板中都有单独的图形。当我切换选项卡时，内容无法正确加载。当我...时，面板的活动状态不会改变

html twitter-bootstrap-3 bootstrap-tabs

回答 5 投票 0

使用 jQuery 显示/隐藏引导手风琴面板

我有一个引导手风琴。现在我想仅在特定场景下启用面板。当我的一个面板有效时，只有另一个面板才应该可折叠我有一个引导手风琴。现在我想仅在特定场景下启用 panel。当我的一个面板有效时，只有另一个面板有效 should be collapsible <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <form id="myform" action="" method="post"> //when this form is valid, then open the collapseTwo panel <div class="panel-body"> <input type="text" id="txtName" name="txtName" /> <br /> <input type="text" id="txtCountry" name="txtCountry" /> <br /> <input id="btn" type="submit" name="submit" value="Submit" /> <br /> </div> </form> </div> </div> <div id="clickMe" class="panel panel-default"> // this will remain closed unless the above form is not valid <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> //Some data </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $("#myform").validate({ rules: { txtName: { required: true }, txtCountry: { required: true } } }); $("#myform").valid(); $('#clickMe').on('shown.bs.collapse', function (e) { //i click on the panel header if ($('#myform').valid()) { //now if the first panel(which contains form) is valid $('#collapseTwo').collapse('show'); //then show the clicked panel } else { $('#collapseTwo').collapse('hide'); //else always keep it hidden/locked alert('form invalid'); } }) }); </script> 小提琴这与它实际的功能并不接近。 collapseTwo 面板应被锁定，并应显示一条警告消息，指出collapseOne 面板无效。如果表单有效，那么它应该是折叠的默认行为。您正在面板关闭后进行检查 shown: $('#clickMe').on('shown.bs.collapse', function (e) { 请使用 show 方法： $('#clickMe').on('show.bs.collapse', function (e) { 还有其他事情正在发生，但这只是一个开始。更新：发现另一个问题...不需要强制崩溃行为。必要时就预防一下吧。 if (!$('#myform').valid()) { return false; } 演示使用默认折叠方式显示和隐藏展示 $("#collapseOne").collapse('show'); 隐藏 $("#collapseOne").collapse('hide');

javascript jquery twitter-bootstrap twitter-bootstrap-3 jquery-validate

回答 2 投票 0

引导模态+ajax+jquery+验证+.net core 2.0

我正在尝试创建一个简单的电影数据库类应用程序，用于学习 bootstrap 和 mvc。我在.net core 2.0中使用了adminlte模板。仅使用 mvc 一切工作正常。但后来我想...

javascript c# asp.net twitter-bootstrap-3 asp.net-core

回答 3 投票 0

twitter-bootstrap-3 相关问题

最新问题