twitter-bootstrap 相关问题

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

引导工具提示未在徽章上触发

我有一个 Laravel 应用程序，我试图在徽章上触发 Bootstrap 工具提示，但在控制台中收到以下错误：未捕获的引用错误：工具提示未定义我正在导入

javascript laravel twitter-bootstrap build twitter-bootstrap-tooltip

回答 2 投票 0

Vue/Bootstrap 表使用 CSS 类条件样式化行

我正在开发一个 Vue/Bootstrap 项目，并尝试根据表中项目的值有条件地更改 b 表中行的颜色。我使用该方法取得了一些成功

css vue.js twitter-bootstrap conditional-statements

回答 1 投票 0

Bootstrap 4.0 - 使用弹性列

您好，您能帮我在代码中设置列吗？我有这个代码：侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1">  <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div>  <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>

css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

回答 4 投票 0

水平引导卡，其卡体填充垂直空间并具有条件“扩展器”（了解更多）按钮

我正在尝试制作一张具有有限高度的水平卡片和一个按钮扩展器以消除高度限制。 .col-4 应包含使用 object-fit:cover 的图像。 .card-body 可能包含

html css twitter-bootstrap bootstrap-cards

回答 1 投票 0

Datepicker：模态上的日期选择器（z-index）

今天，当我尝试在 Bootstrap Modal 上显示日期选择器时，我遇到了这个问题。我使用 bootstrap-datepicker 作为日期选择器库。这是我的模式形式： <... 今天当我尝试在 Bootstrap Modal 上显示日期选择器时遇到这个问题。我使用 bootstrap-datepicker 作为日期选择器库。这是我的模式形式： <div class="form-group"> <label for="message-text" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 这是我的日期选择器脚本： $('#datepicker2').datepicker({ autoclose: true, format: 'yyyy-mm-dd', zIndexOffset: 10000 }); 我已经使用了 zIndexOffset 但它不起作用，日历仍然显示在模式后面。有人可以建议解决方案吗？谢谢你。您应该尝试在模式中添加日期选择器容器div。你可以给模态一个 id，如下所示： <div class="form-group" id="myModalWithDatePicker"> <label for="start_date" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 然后您可以使用 container 选项，如下所示： $('#datepicker2').datepicker({ autoclose: true, container: '#myModalWithDatePicker', format: 'yyyy-mm-dd' }); 我使用此选项来修复。 .modal-open .ui-datepicker{z-index: 2000!important} 此选项已在模态打开时应用（类 modal-open 添加到主体）这对我来说很好用...只需添加样式 <style> /* style sici */ .datepicker { z-index: 1600 !important; } </style>

javascript jquery twitter-bootstrap jquery-ui datepicker

回答 3 投票 0

Bootstrap活动类删除和添加问题

所以我想从我用bootstrap创建的标签中添加和删除活动类，我尝试使用javascript方法，但它仍然不起作用。谁能帮助我的问题吗？这是我的html代码，所以我想从我用bootstrap创建的标签添加和删除活动类，我尝试使用javascript方法，但它仍然不起作用。谁能帮我解决问题吗？这是我的html代码， <div class="container-fluid"> <div class="row flex-nowrap"> <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark " style="width: 250px;"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">YooBudget</span> </a> <hr> <ul class="nav nav-pills flex-column mb-auto"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a> </li> <li> <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a> </li> <li> <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a> </li> <li> <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a> </li> <li> <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a> </li> </ul> <hr> <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a> <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> <li><a class="dropdown-item" href="#">New project</a></li> <li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Sign out</a></li> </ul> </div> </div> 下面是我的 javascript 代码 const navLinkEls = document.querySelectorAll('.nav-link'); navLinkEls.forEach(navLinkEl => { navLinkEl.addEventListener('click', ()=> { if(document.querySelector('.active')) { classList.remove('active'); } navLinkEl.classList.add('active'); }); }); 您的 classList 调用未附加到元素。试试这个： const navLinkEls = document.querySelectorAll('.nav-link'); navLinkEls.forEach(navLinkEl => { navLinkEl.addEventListener('click', ()=> { document.querySelector('.active')?.classList.remove('active'); navLinkEl.classList.add('active'); }); });

javascript twitter-bootstrap

回答 1 投票 0

Boostrap/switch 组件：如何设置单击输入时显示的浅蓝色“光环”的样式？

我尝试检查 css 更改，但浏览器工具中没有显示任何内容。有任何想法吗？谢谢！单击此处进行演示：https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches

twitter-bootstrap bootstrap-5

回答 1 投票 0

将 Bootstrap 按钮样式添加到 WordPress 中的默认古腾堡按钮块

我想将 Bootstrap 框架中的默认按钮样式与 Gutenberg 的默认按钮块一起使用。我找到了一个解决方案，可以从 WordPress 中删除默认样式并添加一些自己的样式...

wordpress reactjs twitter-bootstrap wordpress-gutenberg gutenberg-blocks

回答 4 投票 0

Bootstrap 5 上面的图像和文字

我有 Bootstrap 5 网站模板，我需要在中心图像上添加白色背景的文本。这是我的代码我有 Bootstrap 5 网站模板，我需要在中心图像上添加白色背景的文本。这是我的代码 <div class="container-fluid overflow-hidden"> <div class="row"> <div class="col-12 col-md-6 p-0 position-relative"> <div class="position-relative"> <img class="img-fluid w-100 h-100 object-fit-cover" loading="lazy" src="images/contact-us-img.png" alt=""> <div class="contact-image-box"> <h3 class="our-company-title">Title</h3> <p class="our-company-text">Company text</p> </div> </div> </div> <div class="col-12 col-md-6 align-self-md-center"> content here </div> </div> </div> 我尝试使用这个CSS .our-company-title{ line-height: 31px; letter-spacing: 0; color: #000; font-size: 25px; } .our-company-text{ color: #787878; line-height: 150%; font-size: 18px; letter-spacing: 0; } .contact-image-box { position: absolute; background-color: #fff; text-align: center; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; } 在这种情况下，我看到白色而不是图像，但我想要白色矩形，并在图像中心放置标题和文本我也尝试过 .contact-image-box { max-width: 400px; } 但是在这种情况下标题和文本左对齐而不是居中我的建议是在联系人图像框中使用内部 div。这个 div 应该包含文本和内容，另一方面，.contact-image-box div 应该是一个容器。将这些 Flexbox 属性赋予该容器 div，然后将该白色背景颜色添加到内部 div。应该是这样的： .contact-image-box { inset: 0; // this is equivalent to the top, bottom, left and right set to 0 display: flex; align-items: center; justify-content: center; flex-direction: column; & > div { background-color: white; } } 您想将 background-color 添加到 h3，如下所示： .our-company-title{ line-height: 31px; letter-spacing: 0; color: #000; font-size: 25px; background-color: #fff; } JSFiddle：https://jsfiddle.net/TRNCFRMCN/0sygdf3w/4/

html css twitter-bootstrap

回答 2 投票 0

Yii：如何制作一个标签内带有 html 标签的按钮

我不接受 OpenAI 或任何其他数据训练类型的 AI 使用我的知识

php twitter-bootstrap yii

回答 5 投票 0

删除移动设备上页面滚动上的 Bootstrap 4 工具提示，然后点击切换图标重新启用

我正在使用 Bootstrap 4 工具提示，并且在移动设备上，因为点击充当悬停并且它不会消失，工具提示在页面滚动上看起来很奇怪。因此，为了解决这个问题，我使用隐藏页面滚动上的工具提示 $(赢...

javascript jquery css twitter-bootstrap

回答 1 投票 0

如何使用 Bootstrap 5 将图像与文本输入并排放置

我正在尝试将放大镜图像放置在文本输入的左侧。它被渲染在文本输入上方。让它们与 Bootstrap 5 并存的正确方法是什么？ ...

html css twitter-bootstrap bootstrap-5

回答 1 投票 0

Bootstrap 4 更改折叠中的图标

我使用bootstrap 4 alpha 6版本。在我的页面中，我有几个折叠块。我想在用户打开/关闭该块时更改图标。由于我有几个这样的块，我使用了类，但它不起作用。

javascript html twitter-bootstrap bootstrap-4 twitter-bootstrap-4

回答 1 投票 0

如何在 php 中使用 bootstrap 分页

我正在使用 php 和 mysql，我设法按照本教程进行分页： http://www.phpfreaks.com/tutorial/basic-pagination 这是“mywebpage”（工作中）：http://ada.uprrp.edu/~eh...

php twitter-bootstrap pagination

回答 3 投票 0

Bootstrap 3.4 版本与 JQuery 3.4 版本兼容吗？

Bootstrap 3.4 版本与 JQuery 3.4 版本兼容吗？或者我需要升级到 Bootstrap 版本 4 吗？我不能使用 3.4 版之前的较低版本的 JQuery，因为根据我们的...

jquery twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

Bootstrap 3.3.6 和 JQuery 3.1.0 不兼容？

这两个（都是最新版本）有可能不兼容吗？（片段中：本地文件为最新版本，网上检索到的文件为旧版本）有什么吗...

jquery twitter-bootstrap drop-down-menu compatibility

回答 3 投票 0

我的要求是，单击按钮后，应在对话框模式中显示 pdf 文件。请帮忙！引导示例<...</desc> <question vote="13"> <p>我的要求是，单击按钮后，应在对话框模式中显示 pdf 文件。请帮忙！</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"> <h2>View PDF</h2>  <button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> </div> </div> </div> </div> </body> </html> </code></pre> </question> <answer tick="false" vote="27"> <p>您还可以将 pdf 嵌入模式中。像这样：</p> <pre><code><embed src="sample.pdf" frameborder="0" width="100%" height="400px"> </code></pre> <p>这对我有用</p> </answer> <answer tick="true" vote="18"> <p>很抱歉让您失望，但默认情况下不能仅在模式中显示 pdf。这不是有意的行为。即使使用 <pre><code><iframe></code></pre>，您也无法在引导模式内渲染 pdf。此外，大多数在线提供的 hack 都不支持跨浏览器。更理想的方法是使用插件，我会给你一些链接，你可以使用它们来实现你想要的。</p> <p>1）结账<pre><code>PDFObject</code></pre>JS，</p> <pre><code><script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script> </code></pre> <p>PDFObject 将 PDF 文件嵌入到 HTML 文档中。 <a href="http://pdfobject.com/" rel="noreferrer">链接</a>.</p> <p>2) Bootstrap 的简单模态插件。 <a href="http://bootsnipp.com/snippets/VX7EN" rel="noreferrer">演示片段</a>和<a href="http://saribe.github.io/eModal/#demo" rel="noreferrer">网站</a></p> <p>3) 使用 jQuery 对话框模态弹出窗口。 <a href="http://www.aspsnippets.com/demos/1261/" rel="noreferrer">演示</a>。</p> <p>希望有帮助。</p> </answer> <answer tick="false" vote="13"> <pre><code><div class="modal fade" id="modal-agreement"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object> </div> </div> </div> </div> </code></pre> </answer> <answer tick="false" vote="2"> <p>你也可以试试这个</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>可以在modal/popup中添加iframe。</p> <pre><code><iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe> </code></pre> <p>根据您的要求，您可以设置参数的样式。</p> </answer> <answer tick="false" vote="1"> <p>在 JS 中使用 Vuejs 全屏模态显示 pdf。</p> <p><strong>html</strong></p> <pre><code> <div class="modal " tabindex="-1" id="idXyz"> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">[[formName]]</h5> <button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">close </button> </div> <div class="modal-body"> <embed v-bind:src="getUrl" frameborder="0" width="100%" height="100%"> </div> </div> </div> </div> </code></pre> <p><strong>Javascript</strong></p> <pre><code>var pdfVueModal = new Vue({ el: '#idXyz', data: { getUrl: null, formName: null }, methods: { showPdf: function (getUrl, formName) { this.getUrl = getUrl; this.formName = formName; $('#idXyz').modal('show'); } }, delimiters: ["[[", "]]"], }); </code></pre> </answer> <answer tick="false" vote="0"> <p>但是我收到这样的错误：不允许加载本地资源：file:///D:/</p> <p>好吧...您的浏览器不允许直接从硬盘加载该文件。在你看来，你可能会得到这样的东西：</p> <pre><code><img src="C:\xampp\htdocs\socialNet\public\uploads\joew.png" /> </code></pre> <p>您需要浏览器的 URL 才能访问此图像。在您看来，您需要类似的东西：</p> <p>Laravel 中的 asset() 函数从公共文件夹创建一个 URL 并附加您提供的参数。因此，这将创建一个类似以下的 URL：<pre><code>http://localhost/public/uploads/joew.png</code></pre></p> <p>编辑：您指定的文件夹<pre><code>(storage_path)</code></pre>可能根本无法被浏览器读取。将上传更改为<pre><code>public_path('uploads')</code></pre>，即可访问。</p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript jquery twitter-bootstrap

回答 0 投票 0

引导行不占据 100% 宽度

我有一个引导网格布局，但行没有占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML：我有一个引导网格布局，但该行未占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML： <div class="container-fluid"> <h1 class="center-text" id="heading">[Enter Heaading Here]</h1> <div class="container"> <div height="100px" class="row border-show"> <div class="col-4" id="one"></div> <div class="col-4" id="two"></div> <div class="col-4" id="three"></div> </div> </div> </div> 这是CSS： .center-text{ text-align: center; } #heading{ padding: 60px; } .border-show{ border-style: solid; border-color: black; } 万一其他人遇到这个问题并且答案不能解决他们的问题，导致此问题的问题是因为我没有意识到我正在添加一行并尝试在 Bootstrap 导航栏中设置列。默认情况下，导航栏已经有一个类似网格的系统，因此如果您尝试在其中添加列，那么您似乎将其推到了边缘。无论如何，它们都没有必要。因此，如果这个答案不能解决您的问题，请检查您是否位于另一个已经处理间距的 Bootstrap 组件内。您可能正在尝试对您的内容进行双重定界！将其从container中取出。 container 不是 100% 宽度，不应嵌套在另一个容器中。 container类有这样的效果。 <div class="container"> <div class="row"> <div class="col-12"> div into <b>container</b> class </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> div into <b>container-fluid</b> class </div> </div> </div> 此代码将生成以下图像：在我的例子中，甚至容器流体也不起作用，因为我在同一 div 中使用了带有容器流体的行类。因此，我从父 div 中删除了行类，并在其中创建了一个子 div 并使用了行类。然后就成功了。 <div class="container-fluid row"> <div class="col-12"> didn't work </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> worked </div> </div> </div> 我刚刚遇到了类似的挑战，嵌入式 iframe 没有占据整行。我正在使用 bootstrap 5。以下是让 iframe 占据 100% 宽度并具有响应能力的方法： <div class="row"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/cTp3w2ZUUxw?rel=0" allowfullscreen></iframe> </div> </div> ratio和ratio-16x9是Bootstrap 5中的新功能，使这一切变得超级简单。

html css twitter-bootstrap

回答 5 投票 0

将表格行分成多行（响应式布局）

我有一个列出项目的网页。默认模板使用一个表格来实现这一点，我认为这非常合适。然而，在此表中，有一列包含的文本比其他列多得多：

html twitter-bootstrap responsive-design twitter-bootstrap-3

回答 5 投票 0

使用 connect-assetmanager 缩小 bootstrap.js 会导致语法错误。为什么？

在 node.js/Express 应用程序中使用 connect-assetmanager。这有效： js：{ 数据类型：'javascript'，路径：__dirname + '/../public/javascript/', 文件：[//'jquery-1.7.1.js' ...

node.js twitter-bootstrap express minify node.js-connect

回答 2 投票 0

twitter-bootstrap 相关问题

最新问题