Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
使用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(); };
维护 Yii2 GridView 页面更改上的 Bootstrap 选项卡
我有一个页面有 5 个引导选项卡。当我在任何选项卡上更改寻呼机时，都会移动到第一个选项卡。 如何激活用于更改寻呼机的选项卡。 整个页面有 5 个 dataProvider。埃克...
当我使用引导选择时，选择选项不起作用。 $(函数() { $('.selectpicker').selectpicker(); }); .sc_表{ 高度：100vh； 溢出：滚动； } 当我使用引导选择时，选择选项不起作用。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body> 您遇到的 bootstrap-select 无法正常工作的问题可能是由于 Bootstrap 5 的 兼容性 问题。 您使用的 bootstrap-select 版本可能与 Bootstrap 5 不完全兼容。要解决此问题，您可以尝试使用与 Bootstrap 5 兼容的 bootstrap-select 版本，例如版本 1.14.0-beta2 或 later。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <!-- Include Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <!-- Include Popper.js --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <!-- Include Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <!-- Include Bootstrap-Select CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"> <!-- Include Bootstrap-Select JS (compatible version with Bootstrap 5) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body>
使用ajax加载数据后正确重新加载和重新格式化Bootstrap Popover
首先让我声明，有很多文章询问如何将 Ajax 调用的数据简单地加载到 Bootstrap 4.0 弹出窗口中；这个问题涉及一个稍微不同的主题。 ...
如何将焦点设置到 Vue3 Typescript 应用程序以在打开时在 Bootstrap 模式上输入元素
我正在尝试做一件看似简单且常见的事情，事实证明这是相当困难的。我只需要设置一个特定的文本输入元素来专注于模式对话框的打开。她...
如何在 vue-cli 构建的 vue 项目中使用 bootstrap-icons 作为 svgs
我尝试在我的vue项目中使用bootstrap-icons库，现在我只需导入CSS文件，这样我就可以用作图标字体（“i”标签）。但我想将它们用作svgs，这样我就可以使用线性梯度...
我正在使用 bootstrap 和 jquery UI 对话框。 在我的页面顶部有一个 z-index 为 1000 的元素。 当我打开一个 jquery UI 对话框时，外部 div 的 z 索引是 101。 ...
Wordpress 博客页面，其博客内容以 Bootstrap 模式出现，而不是新页面
我希望我的 WordPress 博客内容使用 BootStrap 以模式显示，而不是打开新页面。
我有这么大的代码，它应该计算一些数字，如果答案正确，则将它们设为绿色，如果答案错误，则将它们设为红色。 我正在使用引导程序，并且想要更改某些表单的类，所以...
在 Safari (Mac) 上**，当我在 Bhooks.com 上滚动时，卡片与网页的页脚和页眉重叠（位置：固定）。到目前为止我无法弄清楚为什么，我希望能找到一些帮助......
网页的打印和打印预览在 Microsoft Edge 浏览器中无法正常工作
我在使用网络应用程序时遇到了一个奇怪的问题。通常，用户右键单击网页并单击“打印”。他在预览中查看文档，然后决定如何打印它。 在 Chro...
我想知道我的嵌套行加起来是否可以超过 12 行？这样的工作方式有错吗？ 我尝试过，它似乎对我来说效果很好，但我想确保我做得正确。 对于前任...
我只是在尝试 Bootstrap，并且有点困惑为什么当我将多个 .col 类应用于 div 时它似乎没有影响。这是我的代码： 我只是在尝试 Bootstrap，并且有点困惑为什么当我将多个 .col 类应用于 div 时它似乎没有影响。这是我的代码： <div class="container"> <div class="row"> <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="cheryl-winn-boujnida-65955.jpg" alt="Card image cap"> <h4 class="card-title"> <i class="fa fa-circle-o-notch" aria-hidden="true"></i> Fast photo printing </h4> <p class="card-text">Upload content and have it sent to your address within 3 hours</p> </div> </div> <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="neonbrand-371471.jpg" alt="Card image cap"> <h4 class="card-title"> <i class="fa fa-superpowers" aria-hidden="true"></i> Total access </h4> <p class="card-text">Access your media from any device, from any location</p> </div> </div> <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="allef-vinicius-205147.jpg" alt="Card image cap"> <h4 class="card-title"> <i class="fa fa-ravelry" aria-hidden="true"></i> Freedom </h4> <p class="card-text">Choose your package to suit your needs and usage</p> </div> </div> </div> </div> div 在大屏幕上水平排列正常，但是当我减小屏幕尺寸时，div 会堆叠，但似乎没有考虑我尝试与 .col 类一起应用的设置。 如果 Bootstrap 中列类别值的总和大于 12，则列将堆叠。例如，在您的代码中，您为三个 div 指定了一个类 col-md-8。因此，行的大小为 8*3 = 24，大于 12，无法放入 Bootstrap 容器。因此它们堆积起来。 为了避免堆叠，您应该将 col-md-8 设置为 col-md-4，并类似地将 col-sm-10 更改为 col-sm-4。这应该可以避免堆叠。
我对 Bootstrap 相当陌生，我了解 Bootstrap 如何使用 12 列网格。当我想利用 Bootstrap 网格时，我通常会这样做： ... 我对 Bootstrap 相当陌生，并且我了解 Bootstrap 如何使用 12 列网格。当我想利用 Bootstrap 网格时，我通常会这样做： <div class="row"> <div class="col-md-6"> ... </div> <div class="col-md-6"> ... </div> </div> 我还了解不同的列大小用于不同的屏幕尺寸： <div class="row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div> 但是，我看到很多人做了类似的事情： <div class="row"> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> </div> 为什么要使用多种列尺寸？浏览器会检测哪一个适合使用吗？ 在此示例中绝对没有理由拥有所有三个类： <div class="row"> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> </div> 它实际上与此相同： <div class="row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div> Bootstrap 网格类适用于高于指定大小的所有尺寸，因此应用 col-xs-6 将导致该元素在任何较大的屏幕尺寸（如 sm、md 等）上也包含 6 列。我猜无论谁包含所有这三个第一个示例中的类对 Bootstrap 网格系统的工作原理没有深入的了解。 如果您希望元素在不同的屏幕尺寸上具有不同的尺寸，则只需包含多个类： <div class="row"> <div class="col-xs-4 col-md-3 col-lg-2"> ... </div> <div class="col-xs-8 col-md-9 col-lg-10"> ... </div> </div> 多种col尺寸适用于不同类型的屏幕： xs：超小屏幕（手机） sm：类似于平板电脑的屏幕 md：像桌面一样的屏幕 lg：更大桌面的屏幕 基本上，这些将在 media 中的各种 bootstrap.css 查询中定义，这有助于浏览器检测要使用哪一个。 在这里了解更多 附录 使用上述不同的 col 类应该是为不同屏幕指定不同列大小的唯一情况。例如：如果您想要在 col 中放置 12 个 xs，在 col 中放置 6 个 sm，在 col 中放置 3 个 md，在 col 中放置 2 个 lg，那么您可以将其用作 col-xs-12 col-sm-6 col-md-3 col-lg-2 。否则，如果所有屏幕的它们都相同，那么您可以使用上面的任何一个，如 col-lg-6 中所示。这将告诉浏览器使用 6 cols，无论屏幕尺寸如何。 查看此页面以获得想法 http://getbootstrap.com/examples/grid/ 一般来说，使用多个 col 类背后的想法是根据屏幕尺寸使用不同的宽度百分比： 示例： 如果你在元素上添加 col-md-6 和 col-xs-12 ，当屏幕尺寸接近中等断点时，它将使用 6 列，但当屏幕尺寸较小时，它将使用整个宽度 该方法通常用于屏幕尺寸。这样您就不会在 7 英寸屏幕上看到 7 列。例如;使用 <div class="col-xs-1 col-md-3 col-lg-6">，您可以在手机上显示 1 列，在大型平板电脑上显示 3 列，在桌面显示器上显示 6 列。
如果轮播被包裹在浮动 CSS 中，Bootstrap 5 轮播在按下一个或上一个时会显示放大的图像
我正在使用 Bootstrap v5.3.3 Carousel。我遇到的问题是，如果轮播包含在 float-start 类中，则按下一个或上一个时，轮播会显示放大的图像。 最小的co...
Premium Fullcalendar 未选择 Bootstrap5 主题
这就是我所看到的（主题看起来不适用） 这就是我期望它的样子 我可以让 bootstrap 主题在标准版 fullcalendar 上运行，但不能在高级版上运行
我使用 Laravel 框架用 php 开发我的网站。下面是我的下拉菜单的源代码，但是子菜单不会显示在浏览器上。可能是什么问题？ 我使用 Laravel 框架使用 php 开发我的网站。下面是我的下拉菜单的源代码，但是子菜单不会显示在浏览器上。可能是什么问题？ <div class="btn-group"> @guest <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> My Account </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="{{route('login')}}">Login</a></li> <li><a class="dropdown-item" href="{{route('register')}}">Register</a></li> </ul> @endguest @auth <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> {{Auth::user()->name}} </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="{{route('app_logout')}}">Logout</a></li> </ul> @endauth </div> 我尝试使用 Firefox、Google Chrome 和 Microsoft Edge 浏览器，但仍然一无所获 根据您的代码片段： Based on your code snippet: html Copy code <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> You are using data-bs-toggle="dropdown", which is correct for Bootstrap 5. However, Laravel 8 (as of my last update) ships with Bootstrap 4 by default, where the correct attribute would be data-toggle="dropdown" instead of data-bs-toggle="dropdown". 您正在使用 data-bs-toggle="dropdown"，这对于 Bootstrap 5 来说是正确的。但是，Laravel 8（截至我上次更新）默认情况下随 Bootstrap 4 一起提供，其中正确的属性是 data-toggle=" dropdown" 而不是 data-bs-toggle="dropdown"。 如果您打算使用 Bootstrap 5 功能，请确保您已更新 Laravel 项目以使用 Bootstrap 5。您可以通过更新 package.json 以包含 Bootstrap 5，然后运行 npm install ，然后运行 npm run dev 来编译您的资源来完成此操作. 致以诚挚的问候 丹麦哈菲兹 |质量检查助理 https://www.ictinnovations.com https://www.ictbroadcast.com
我正在基于 Roots 主题构建一个自定义主题，该主题现在使用 Twitter Bootstrap 作为框架。 它使用自定义“walker”进行导航，因此我不能仅通过 Header.p 中的 PHP 对其进行过滤...
当页面滚动时，Bootstrap 5 工具提示放置最重要的问题
当强制放置顶部时，我在引导程序中遇到工具提示问题。我现在使用的是最新版本：5.1.3 我尝试创建一个代码片段，但问题在代码上无法重现...
我正在尝试为我的网站制作一个导航栏，左侧有一个下拉菜单，中间有图像，右侧有可折叠项目。我正在使用 bootstrap with less 来设置导航栏的样式，但我...