twitter-bootstrap 相关问题

我正在使用带 boostrap 的模态窗口。我已经更改了背景和字体颜色，但我没有成功将右上角的关闭按钮更改为白色。我正在使用带有 boostrap 的模态窗口。我已经更改了背景和字体颜色，但我没有成功将右上角的关闭按钮更改为白色。 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="modal_button">×</span><span class="sr-only">Close</span></button> 这是我的 css 属性 .modal-header { border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; text-align: left; font-size: 23px; color: white; background-color: #261f31; border-bottom: 0px; } 我想将 X 按钮变成白色 Bootstrap 设置颜色是这样的： .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2; } 所以你可以用这个覆盖它： .close { color: #fff; opacity: 1; } 在 bootstrap 5 中，他们有一个类，允许您将关闭按钮的颜色更改为白色。 <button type="button" class="btn-close btn-close-white" aria-label="Close"></button> Bootstrap 5.3 更新从 v5.3.0 开始，.btn-close-white 类已弃用。相反，请使用 data-bs-theme="dark" 更改关闭按钮的颜色模式。 <div data-bs-theme="dark"> <button type="button" class="btn-close" aria-label="Close"></button> <button type="button" class="btn-close" disabled aria-label="Close"></button> </div> 来源只需写下代码 filter: brightness(0) invert(1); 您可以覆盖模态弹出窗口中的默认 x 按钮的简单方法 button.close { background: #d73e4d; background: rgba(215, 62, 77, 0.75); border: 0 none !important; color: #fff7cc; display: inline-block; float: right; font-size: 34px; height: 40px; line-height: 1; margin: 0px 1px; opacity: 1; text-align: center; text-shadow: none; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; vertical-align: top; width: 46px; } 对于 Bootstrap 5，您需要添加 btn-close-white 类

css twitter-bootstrap

回答 5 投票 0

如何调整输入组插件的大小

嗨，我有一些输入选项，如下所示，我试图使所有选项具有相同的宽度。我尝试通过外部 css 继承默认样式：。添加在 { 宽度：50%；背景-

html css twitter-bootstrap

回答 2 投票 0

Bootstrap：反转列使它们堆叠

我试图让“第二”和“第三”列彼此相邻，同时还反转 MD 断点的顺序我试图让“第二”和“第三”列彼此相邻，同时还反转它们的 MD 断点顺序 <body> <div class="row flex-md-column-reverse"> <aside class="col-6"> <div class="border-top"> <h1>Third</h1> </div> </aside> <div class="col-6"><h1>Second</h1></div> <section class="col-12"> <h1>First</h1> </section> </div> </body> 我应用了flex-md-column-reverse，但它使它们彼此堆叠你可以玩玩order: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <aside class="col-6 order-md-3"> <div class="border-top"> <h1>Third</h1> </div> </aside> <div class="col-6 order-md-2"><h1>Second</h1></div> <section class="col-12"> <h1>First</h1> </section> </div>

html css twitter-bootstrap flexbox

回答 1 投票 0

如何使用 flex 让一个 div 向左对齐跨越所有高度，两个 div 在背景 div 内向右对齐顶部和底部？

所以我有 4 个 div，其中一个是充当“背景”div 的父级，以及该 div 内的其他 3 个 div。我想将较大的一个向左对齐并使其跨越整个高度...

css twitter-bootstrap flexbox

回答 1 投票 0

如何让我的 Bootstrap 网格填充页面的剩余高度而不超出它？

所以我有一个 Bootstrap 标头，这是他们示例中的标头之一。在其下方，我有一个包含 3 列的网格容器。我希望该网格填充 h 之后剩余的页面高度...

css twitter-bootstrap flexbox

回答 1 投票 0

引导复选框无法正常工作

我正在使用以下标记和样式（Bootstrap）。它显示了我的复选框，但它处于瘫痪状态，即无法选中。这是我的标记：我想要更多 Bootstrap 风格的东西。我知道那里...

html css twitter-bootstrap

回答 7 投票 0

如何使 Flexbox 容器自动调整宽度并居中且按钮彼此相邻对齐？

我使用以下代码，但容器仍然是全宽我希望它能够适应其内容的宽度 .cta-primary { 显示：柔性；调整内容：居中；对齐项目：...

html css twitter-bootstrap flexbox width

回答 1 投票 0

Bootstrap 中的“aria-desiredby”和“aria-hidden”属性如何工作？

我在Bootstrap的很多地方都找到了这些属性，但我不清楚它们是如何工作的。

html css twitter-bootstrap bootstrap-5

回答 2 投票 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

哪个 css 框架是最好的 bootstrap 或 tailwind css？ [已关闭]

我正在开发一个 Web 开发项目，并试图确定哪个 CSS 框架是最佳选择。我主要关心的是易用性、自定义选项以及创建响应的能力...

twitter-bootstrap tailwind-css

回答 1 投票 0

在 Bootstrap 中悬停时显示文本

我正在尝试将鼠标悬停在行和 col-md-3 内的图像上添加文本。我希望它改变不透明度以设置理想状态，同时在图像内居中显示文本。我将不透明度悬停下来...

html css twitter-bootstrap

回答 3 投票 0

多个 Webpack 捆绑包导致 Bootstrap 脚本无法工作

我得到了这个设置：核心.js 从“bootstrap”导入*作为引导程序；从'bootstrap'导入{Popover}； //...用 Popover 做一些事情的代码一些FancyPlugin.js 从'bootstrap...导入{ Popover }

twitter-bootstrap webpack bootstrap-5 webpack-5

回答 1 投票 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

向视频标签添加深色蒙版

我有一个视频占据了我的英雄部分的一部分，但视频太亮并隐藏了白色的菜单项。如何通过 css 或 bootstrap 使视频标签变暗？我有一个视频占据了我的英雄部分的一部分，但该视频太亮并隐藏了白色的菜单项。如何通过 css 或 bootstrap 使视频标签变暗？ <template> <section class="section-frame br-fix overflow-hidden"> <div class="wrapper image-wrapper bg-cover bg-image bg-overlay bg-overlay-500" > <video class="position-absolute h-100 bg-overlay-500" src="/assets/media/hero-video.mp4" muted autoplay loop/> <div class="container pt-18 pt-lg-21 pb-17 pb-lg-19 text-center"> <div class="row"> <div class="col-md-9 col-lg-8 col-xl-7 col-xxl-6 mx-auto"> <h2 class="h6 text-uppercase ls-xl text-white mb-5" data-aos="fade-up" data-aos-once="true" data-aos-delay="" > We are here to help! </h2> <h3 class="display-1 fs-54 text-white mb-7" data-aos="fade-up" data-aos-once="true" data-aos-delay="200" > Together we can make finances easier and plan together </h3> <div class="btn btn-circle btn-white btn-play ripple mx-auto cursor-pointer" @click=" () => { modalOpen = true; } " > <i class="icn-caret-right"></i> </div> </div>  </div>  </div>  <div class="overflow-hidden"> <div class="divider text-white mx-n2"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60"> <path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" /> </svg> </div> </div>  </div>  </section> <CommonModalVideo :modalOpen="modalOpen" @modalClose="modalClose" /> </template> <script setup> const modalOpen = ref(false); const modalClose = () => { modalOpen.value = false; }; </script> <style lang="scss" scoped></style> 您可以使用CSS功能filter: brightness(70%)来获得更暗的亮度。参考MDN

html css twitter-bootstrap bootstrap-5

回答 1 投票 0

启用表格行特定的类背景来覆盖条纹表格中特定于单元格的类背景

在使用 Bootstrap v5.3.3 构建条纹 Bootstrap 表时，我需要能够使用 Bootstrap“table-danger”类显示一些具有红色背景的单元格。我也需要...

html css twitter-bootstrap bootstrap-5

回答 1 投票 0

twitter-bootstrap 相关问题

最新问题