Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用
我正在编写以下代码。为什么我无法在 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 trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <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 trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <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>
我正在编写下面的代码。为什么我无法将 Y 滚动条添加到 Bootstrap 3 中折叠元素内的 .well 中？ @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/...
我有这段代码 - 只是选项卡式面板，每个选项卡式面板中都有单独的图形。当我切换选项卡时，内容无法正确加载。当我...时，面板的活动状态不会改变
我有一个引导手风琴。现在我想仅在特定场景下启用面板。当我的一个面板有效时，只有另一个面板才应该可折叠 我有一个引导手风琴。现在我想仅在特定场景下启用 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');
引导模态+ajax+jquery+验证+.net core 2.0
我正在尝试创建一个简单的电影数据库类应用程序，用于学习 bootstrap 和 mvc。我在.net core 2.0中使用了adminlte模板。仅使用 mvc 一切工作正常。但后来我想...
我有一个导航选项卡，如下所示： 我正在使用省略号，但我不喜欢我的导航分散在第二行。我不想使用 nav-justfied 而是能够挤压我的 所以... 我有一个导航选项卡，如下所示： 我正在使用省略号，但我不喜欢我的导航分散在第二行。我不想使用 nav-justfied，而是能够挤压我的 ，以便它适合屏幕，并且用户不必水平滚动。 像下面这样 到目前为止我的代码 .nav-tabs>li:not(.active)>a { background-color: white; border: 1px solid #ddd; border-bottom: none; border-top: 3px solid #9d9d9d; text-overflow: ellipsis; max-width: 10em; overflow: hidden; display: block; } .nav-tabs { padding-left: 15px; padding-right: 15px; padding-top: 15px; white-space: nowrap; } <ul class="nav nav-tabs"> <div class="btn-toolbar pull-right"> {% block tab_buttons %} {% endblock %} </div> <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:events:hosts-list' event.id %}" role="tab">Hosts</a></li> {% for tab in event.benchmarks.all %} <li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse"><a href="{% url 'sc:events:benchmarks-summary' event.id tab.id %}" role="tab">{{ tab.name }}</a></li> {% endfor %} </ul> 我不是 100% 确定你在问什么，但听起来你可以从使用中受益： 在导航栏上显示 flex。 如果您在同一页面上加载内容（如管理面板），我强烈推荐Jquery Tabs。 在选项卡上使用 Display:inline-flex; css 属性。
假设我有一个 bootstrap 3 导航栏，其中导航栏品牌包含文本，我如何添加一个适合该导航栏品牌正下方的小字幕？
将variableWidth设置为false时，手风琴内部的光滑轮播会损坏？
如果单击可折叠组项#1，则在设置variableWidth: false 时，其内部的光滑会被破坏。但如果你将其设置为variableWidth: true，它就可以正常工作。 这是引导...
为什么这个 Bootstrap 手风琴示例无法在我的页面上运行？
我是 Twitter Bootstrap 的新手，在尝试实现手风琴时遇到一些问题，如官方文档示例所示：http://getbootstrap.com/javascript/#collapse-example-
当我在此 Twitter BootStrap 页面中展开手风琴内容时，为什么页脚会出现在手风琴内容上？
我是 Twitter Bootstrap 的新手，遇到以下问题。 您可以在此 JSFiddle 中看到问题：https://jsfiddle.net/AndreaNobili/uso4f4xk/ 正如你所看到的，我有一个手风琴和一个
因此在这个网站上工作时遇到了移动视图页面右侧空白的问题。我已经看过一切，但似乎仍然无法摆脱它。 我删除了每个部分...
我得到了这个代码： 演示：http://jsfiddle.net/z21nz89d/2/ HTML：
未为 ArcGIS 服务器地图定义 Bootstrap 模式要求
如果这很简单，但我无法找到解决问题的方法，请原谅我。 我正在尝试在引导模式中打开 ESRI 地图。第一次没有加载...
我想使用引导程序“dropdown-menu”更改为wordpress自动生成的默认“子菜单”类，并使用引导程序的“dropdown”更改“has-children”。我知道这是可以实现的...
我正在使用 Twitter Bootstrap 创建可折叠的文本部分。当按下 + 按钮时，这些部分会展开。我的html代码如下： 演示链接 我正在使用 Twitter Bootstrap 创建可折叠的文本部分。当按下 + 按钮时，这些部分会展开。我的html代码如下： 演示链接 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-chevron-down"></span> Open </button> </h4> </div> <div id="demo" class="panel-collapse collapse in"> <div class="panel-body"> Contents:Thank you to help me solve the problem, you're a great guy! </div> </div> </div> </div> 后来，我需要更改文本、按钮图标并展开。 已开放： <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-chevron-up"></span> Close </button> 已关闭： <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-chevron-down"></span> Open </button> 也可以通过css样式来实现。 在CSS中添加样式： .text-toggle[aria-expanded=false] .text-expanded { display: none; } .text-toggle[aria-expanded=true] .text-collapsed { display: none; } 并在html中使用： <a class="btn btn-default text-toggle" data-toggle="collapse" data-target="#tabsNavigation" aria-expanded="false"> <span class="text-collapsed">More info</span> <span class="text-expanded">Less info</span> <i class="fa fa-angle-right"></i> </a> 请记得添加属性 aria-expanded="false" 和班级 text-toggle 链接/按钮。 基于：https://stackoverflow.com/a/16870379/1596547 $('button span').parent().click(function () { if($('button span').hasClass('glyphicon-chevron-down')) { $('button').html('<span class="glyphicon glyphicon-chevron-up"></span> Close'); } else { $('button').html('<span class="glyphicon glyphicon-chevron-down"></span> Open'); } }); 如果您使用 jQuery，请使用 toggleClass $('div.toggler').click(function(){ $('div.toggler span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); }); 在这里工作 JSFiddle 我发现这个问题和答案很有帮助。我删除了parent()方法，并向我的+按钮添加了一个id，以避免在切换+时更改其他按钮。 $('#more').click(function () { if($('button span').hasClass('glyphicon-chevron-down')) { $('#more').html('<span class="glyphicon glyphicon-chevron-up"></span> Less Info'); } else { $('#more').html('<span class="glyphicon glyphicon-chevron-down"></span> More Info'); } }); http://jsfiddle.net/maybolles/opbyvbv4/2/ 使用此 JavaScript 来更改图标 $(document).ready(function(){ $("#demo").on("hide.bs.collapse", function(){ $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open'); }); $("#demo").on("show.bs.collapse", function(){ $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close'); }); $("#demo1").on("hide.bs.collapse", function(){ $(".btn1").html('<span class="glyphicon glyphicon-collapse-down"></span> Open'); }); $("#demo1").on("show.bs.collapse", function(){ $(".btn1").html('<span class="glyphicon glyphicon-collapse-up"></span> Close'); }); });
使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。 所以我有： 使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。 所以我有： <div class="row"> <div class="col-md-4"> <div id="chartGift" style="height:400px;"></div> </div> </div> 我从官方文档中获取了javascript代码 https://ecomfe.github.io/echarts/doc/example/pie1.html#-en 问题是饼图没有出现，因为检查html代码，我看到宽度为0。为什么echarts不从父元素设置宽度？我不想设置静态宽度（我看到它有效），因为图表没有响应。 如果您只想设置固定高度，请尝试将宽度设置为容器的 100% 并设置最小高度： <div id="chartGift" style="width: 100%; min-height: 400px"></div> 这对我有用！ 另外，如果您想确保图表具有响应能力，您可以知道何时调整窗口大小并强制图表调整大小。像这样： $(window).on('resize', function(){ if(chart != null && chart != undefined){ chart.resize(); } }); 希望有帮助！ 只需使用 ResizeObserver 即可检测图表容器元素大小的变化。即使您的布局发生变化，它也可以工作，并且不依赖于窗口大小调整等。顺便说一句。如果需要，也可提供 Polyfill。 const container = document.querySelector('#chart'); const chart = echarts.init(container); new ResizeObserver(() => chart.resize()).observe(container); 我在购买的管理模板中找到了解决方案。有加载内容后初始化图表的解决方案。这是工作示例： $(document).ready(function () { setTimeout(function () { // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons'); // specify chart configuration item and data var option = {..options of chart here ..} // use configuration item and data specified to show chart myChart.setOption(option); }, 100); }); 图表容器的样式为：style="height: 400px; width: 100%; 这一点很重要，当你使用echart工具箱时，它喜欢走出容器。 我希望它有帮助:) <div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div> 这对我有用。最小宽度：100% 就可以了。 首先，将图表包装在 div 中，并指定 div 宽度：100% 和高度：100%。这允许图表在弹性布局中使用。 其次，你需要给图表的父容器一个宽度（即使它的响应宽度），如 flex: 1。 在解决这个问题时，我必须做很多事情： 包装器应动态确定图表的大小 <div class="goal-chart-wrapper" ref="chartContainer"> <div class="goal-chart" ref="goalChart"></div> </div> CSS 控制包装器的大小并强制孩子遵守父母的大小 .goal-chart-wrapper { width: 100%; min-height: 200px; position: relative; .goal-chart { height: 100%; width: 100%; position: absolute; } } 删除插入画布内图表的渲染填充（在图表选项内）。没有包含标签，轴消失了。 grid: { left: 0, top: 0, right: 0, bottom: 0, containLabel: true } 在决定大小的父级上添加 ResizeObserver，这会触发图表的大小调整 import { init } from 'echarts'; const options = { // ... } this.chart = init(this.$refs.goalChart); this.chartContainer = this.$refs.chartContainer; new ResizeObserver(() => { this.chart.resize(); }).observe(this.chartContainer); this.chart.setOption(options); 为了使图表具有响应性并始终匹配其容器的大小，您可以将 ResizeObserver 与 echartsInstance.resize 结合使用。但是，因为观察开始时会触发观察，这会破坏图表的初始动画。因此，就我而言，我在请求调整大小之前检查是否有实际大小变化： let elemChart = document.querySelector('#divChartPie'); let chart = echarts.init(elemChart); // Make chart responsive (resize chart on elemChart resize) new ResizeObserver(() => { if (elemChart.clientWidth !=chart.getWidth() || elemChart.clientHeight != chart.getHeight()) { chart.resize(); } }).observe(elemChart); 设置 width: 100% 会使 echarts 以节点大小（100px）显示，而设置 min-width: 100% 则根本不显示。所以这是相对 css 单位的一些问题。 但是我们仍然可以使用JS设置图表容器的大小。 let main = document.querySelector("main"); let chartDom = document.getElementById("echartsGrafikon"); // getting width of element we want to size up to our chart // do this before chart initialization let grafikonWidth = main.getBoundingClientRect().width; chartDom.style.width = grafikonWidth + "px"; // initializing echart let echartGrafikon = echarts.init(chartDom); // to dynamically change size window.onresize = function () { echartGrafikon.resize(); };
我想知道我的嵌套行加起来是否可以超过 12 行？这样的工作方式有错吗？ 我尝试过，它似乎对我来说效果很好，但我想确保我做得正确。 对于前任...
我使用 DataTables 插件制作了一个表格。 我创建了一个名为“日期”的列，其中包含一些日期。使用“日期”附近的按钮，我可以订购记录，但我必须使用这种格式...
我正在使用 Datatable 为 HTML 中的表格提供样式，并且我必须启用 ScrollY。 虽然它有效，但它有一个我正在努力解决的风格问题。 当您调整窗口大小时，为了一些重新...