1. IT宝库
  2. 编程技术问答
  3. twitter-bootstrap-4
以下是关于 twitter-bootstrap-4 的编程技术问答
在Safari、Firefox和Edge与Chrome相比，具有(溢出-Y)滚动的flexbox的行为不同
在Plunker(预览)有一个奇怪的问题. 在Windows和Android上的Chrome上，也(金丝雀)也有效.我可以滚动这两个区域(在左侧和右侧)，并且页面的顶部和底部div位于设备屏幕的顶部和底部.我随时看到它们(请参阅下图). 在iPad或iPhone上，iOS，带有Safari或Chrome，这不是我得到的.以及Windows上的Firefox 47.0.1. 页面很长，右侧只有一个滚动，就像页面上没有flexbox一样，此代码只是被忽略: .bigone { display: flex; min-height: 100vh; flex-direction: column; } .main { flex: 1 1 0; display: flex; } .container-fluid { display: flex; } .col-6 { overflow-y: auto; } 怪异示例: 您只需单击此
0 2023-11-30
编程技术问答社区
用vue.js打开bootstrap modal 2.0
有人知道如何使用VUE 2.0打开引导模式吗?在vue.js之前，我只需使用jQuery打开模态:$('#myModal').modal('show'); 但是，有没有适当的方法在VUE中做到这一点? 谢谢. 解决方案 我的代码基于迈克尔·特兰奇达(Michael Tranchida)的答案. bootstrap 3 html:
0 2023-11-25
编程技术问答社区
钩住Bootstrap 4模式的显示/隐藏事件，来自于Typescript。
拥有具有ID myModal的模态>我试图在显示并关闭事件时挂起.遵循/#事件我已将以下内容添加到我的模态组件中: this.modalElement = document.getElementById("myModal"); this.modalElement.addEventListener("hidden.bs.modal", this.onModalHidden); this.modalElement.addEventListener("shown.bs.modal", this.onModalShown); 现在，事件处理程序只会console.log"显示"或"隐藏"进行测试，但不幸的是我无法正常工作: private onModalShown = (event) => { console.log("modal is shown!!!"); } 是否缺少一些东西，可以实现这一目标吗? 解决方案 您可以在ModalComponent中订阅on
2 2023-11-01
编程技术问答社区
将水平标签从Bootstrap 3转换到Bootstrap 4
我有一个来自bootsnip的代码，可以用材料之类的样式制作水平的bootstrap选项卡.我在将其转换为Bootstrap 4时遇到了麻烦.但是结果是不同的. 使用Bootstrap 3:此代码3: horizo​​ntal tab 这是我的代码使用Bootstrap 4: 在 .no-style{ text-decoration:none!important; } .nav-tabs { background-color:#333; border-bottom: 2px solid #DDD; } .nav-tabs > .nav-item > .nav-link.active, .nav-tabs > .nav-item > .nav-link.active:focus, .nav-tabs > .nav-item > .nav-link.active:hover { border-width: 0; } .nav-tabs > .
0 2023-10-30
编程技术问答社区
从Bootstrap 3迁移到Bootstrap 4？
我在项目中使用Bootstrap 3.我看到Bootstrap 4几乎是整个Bootstrap项目的重大重写.但是，是否有必要从3? 迁移到Bootstrap 4 解决方案 使您的项目有点 Future-Profform ！ http://upgrade-bootstrap.bootply.com 在代码中给出了什么不同的代码从Bootstrap 3到4，我建议您访问它. 似乎还有几个更改，有关: 浏览器支持 全球变化 组件 Misc 等等，如在这里，您应该考虑在这里.请注意，它还确认了您的要求: Bootstrap 4几乎是整个项目的主要重写. 并不是您现在必须升级，否则您的应用程序将生活在地狱中，而是似乎在 bootstrap-4 ，所以问题是，您是否希望您的应用现在可以正常要使它有点 Future-Prover-Prover ?取决于您！
6 2023-10-29
编程技术问答社区
什么是Bootstrap 4中的'.well'等价类？
在Bootstrap-3中有 Basic Well 但是，我在Bootstrap-4中没有找到任何.well类. Bootstrap-4中是否有等同于.well的标签? 解决方案 更新2018 ... card替换了well. bootstrap 4 Well 或 ，作为两个Divs ... ... (注意:在Bootstrap 4 alpha中，这些被称为card-block而不是card-body和bg-faded而不是bg-light) 其他解决方案 Wells用版本4 .. 您可以使用这是如何使用新卡功能的快速示例:
编程技术问答社区
如果你的内容要横跨整个宽度，你需要使用Bootstrap的 "容器 "和 "行 "吗？
我认为Bootstrap 3和4的标准是 ... ... 但是，如果您有一个div，table，form或任何元素，您计划让它跨越整个宽度，该怎么办?那么，您是否需要container或row或col-md-12，让整个页面在Bootstrap 3和4的样式规则下很好地显示? ? P.S.如果可能的话，请指向或引用与此相关的官方引导文档. 解决方案 简短答案:您 do 需要使用container，但是您 not 不需要使用row . 您可以将元素直接放在container或container-fluid中.您不是所需的使用网格(
编程技术问答社区
Bootstrap 4 响应式实用程序可见/隐藏 XS SM LG 不工作
在迁移到 Bootstrap 4 时，新响应式实用程序隐藏/可见类.我知道.hidden-班级已经 … … … * 在此示例中没有任何隐藏的东西，无论屏幕尺寸如何(Safari，响应设计模式) 解决方案 使用Bootstrap 4 .hidden-* 类完全删除(是的，它们被hidden-*-*取代，但这些类也来自V4 Alpha). 从v4-beta开始，您可以组合.d-*-none和.d-*-block类以达到相同的结果. 可见 - *也被删除；而不是使用显式.visible-*类，而是通过不隐藏元素可见
0 2023-10-28
编程技术问答社区
如何改变col-xs bootstrap的宽度？
嘿，我找不到我是否可以更改col-xs-12的默认值 我试图把它放置，但我都打破了... 在 .col-xs-12 { width: 600px; } 如果您是一个文档，我可以找到真正很棒的答案！ thx 解决方案 如果要更改任何col-类，请切勿更改Bootstrap类，只需在同一元素和样式上添加一个类，并且在Bootstrap之后应加载外部CSS文件，因此CSS文件具有效果 示例: .my-custom-width{ width:600px; } 其他解决方案 您可以这样使用 或带有媒体查询 @medi
4 2023-10-28
编程技术问答社区
Bootstrap 4的导航条布局使用CDN可以工作，使用下载的代码就会中断
使用下载的Bootstrap 4 alpha代码崩溃并格式化不当，但使用Bootstrap 4 alpha CDN看起来不错.使用下载的代码对于此项目是必需的. 使用下载的Bootstrap 4 alpha代码出现Navbar: 查看图像 使用bootstrap 4 alpha cdn(我想要的外观) Navbar外观:这是我的html，它不会改变: Brand
6 2023-10-28
编程技术问答社区
如何延迟删除Bootstrap 4的下拉式巨型菜单的类？
我正在尝试在Navbar切换上切换一类，但是当您移动鼠标时，下拉菜单会迅速删除类并隐藏菜单.我认为它需要的只是延迟删除班级，但班级的表现仍然可以立即.这是悬停问题的屏幕截图是否有手动写入切换的方法? codepen: = 0110 这是到目前为止的脚本 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready // when you hover a toggle show its dropdown menu $(".navbar .dropdown-toggle").hover(function () { $(this).parent().toggleClass("show"); $(this).parent().find(".dropdown-menu").toggleClass("show"); });
6 2023-10-28
编程技术问答社区
带有HTML5部分和旁白的Bootstrap网格
我正在使用 bootstrap 4网格系统 ，并希望在屏幕的右侧漂浮. 目前我的 main 内容包裹在 col-xl-3 中，我希望旁边也可以使用 col-xl -3 ，但我希望它运行页面的高度，而不仅仅是该行的高度，因为它当前正在将行的高度推出... 从图像中可以看到，我的旁边将顶行推高于底部... 我所做的一切代码是 section.body article, section.body aside { float: left; clear: both; } 任何帮助将不胜感激. 解决方案 我使用了" col-sm"，但原理仍然相同.一切都是关于筑巢的. 在整页中查看以查看列.
2 2023-10-28
编程技术问答社区
如何在Bootstrap 4中把Font-Awesome图标与一行文字垂直对齐？
我试图将一个令人敬畏的图标垂直与小块或文本线相结合.这是我要实现的图片:我正在使用的网页的一部分在这里可以看到: Honors and Awards Boy Scouts of America Eagle Scout Rank The Highest Rank in Scouting April 2014 解决方案 这种布局正在发生，因为所有元素都是h是块级别元素.为了使其按照您的意愿对齐 - 您需要将其与左侧相关联的任一位置，请将其插入一个标题.
8 2023-10-28
编程技术问答社区
为什么在Bootstrap 4 Modal中注入javascript代码时没有加载？
我有一个JavaScript函数，该功能打开Bootstrap模态对话框: function showModal(message, headerMessage, sticky, noFooter){ var modal = $(' ',{ class: 'modal fade hide', role: "dialog", 'aria-labelledby': "modalTitle", 'aria-hidden': "true", tabindex: -1 }); var modalDialog = $(' ',{ class: 'modal-dialog', role: "documen
6 2023-10-28
编程技术问答社区
热门专题
ThreadPoolTaskExecutor几种拒绝策略 lombok编译报错,找不到符号 css实现水池流进流出效果 用Java实现读入多个半径,输出对应圆面积 ffmpeg集成所有第三方库 redis利用硬盘解决OOM 安装包语言不受系统支持 office2010 css img缺少时占位 远程credssh无法 xamarin webview 自动高度 Servlet 获取服务器ip @Conditional 自动装配 链接器工具错误 LNK2019最新 linux如何复制隐藏文件 azure 查看单元测试覆盖率 API读取数据库某张表的数据 类似于odata vivado怎么看观测信号 MFC用Cookie登陆网页 es所有切词结果全部匹配 import opencv失败