twitter-bootstrap-3 相关问题

打开引导模式后，自动填充右：19px添加在body标签中。我想删除这个自动填充。我已经尝试了以下模态代码并删除了主体自动填充。打开引导模式后，自动填充右：19px添加在body标签中。我想删除这个自动填充。我已经尝试了以下模态代码并删除了主体自动填充。 <div class="media" data-toggle="modal" data-target="#kolpochitro"> -------- </div> 那么我已经写了 <div class="modal fade" id="kolpochitro" role="dialog"> <div class="modal-dialog modal-sm" >  <div class="modal-content"> <div class="modal-header"> ------- </div> <div class="modal-body"> ------ </div> </div> </div> </div> 打开模态后，我的身体标签正在查看萤火虫 <body class="cbp-spmenu-push modal-open" style="padding-right: 19px;"> 为了删除这种样式，我正在尝试以下代码 $('document').ready(function(){ $('.media').click(function(){ $("body").removeAttr("style"); }) }) 但它不起作用。我也有同样的问题。正如接受的答案中那样，使用 Javascript 删除内联样式将删除填充，但直到模态完全显示后才会删除，因此它仍然会导致某种不稳定的行为。最后我用CSS删除了填充，这将确保页面内容不会移动并且始终没有填充。 body.modal-open { padding-right: 0 !important; } 希望这对有同样问题的人有帮助。使用所示函数进行更新： $('#modal-content').on('shown.bs.modal', function() { $("body.modal-open").removeAttr("style"); }); 或者对于以前版本的 Bootstrap ： $('#modal-content').on('shown', function() { $("body.modal-open").removeAttr("style"); }) 欲了解更多信息，请查看此链接我知道这是迟了一年的答案，但只是为了让遇到同样问题的人，如果你只是采用迈克尔的解决方案，你可以面对第二个问题，他的解决方案对我有很大帮助，但我面临第二个问题，当打开一些模态时，我只是在某些元素上发生了奇怪的变化，在尝试了一些更改之后，我最终使用了： body:not(.modal-open){ padding-right: 0px !important; } 当您打开模态时，您将保留填充，并在不存在时删除填充，这样您不仅可以解决填充问题，还可以解决移位问题（您可以得到这个，但并非总是如此），您还可以保留“ fade”类，这也会导致一些问题。如果其他方法不起作用那么： <body style="padding-right:0px !important;"> 这将放置 19px 填充，但不会更多..

jquery twitter-bootstrap twitter-bootstrap-3

回答 4 投票 0

引导响应表未响应响应

我正在研究下面的代码，并试图找出：为什么该表没有响应我希望能够通过使用 col-md-3 和 col-lg-3 来控制宽度；这在表中是否有效

twitter-bootstrap twitter-bootstrap-3 bootstrapper

回答 4 投票 0

如何去除 Bootstrap 按钮的悬停效果？

我有一个 Bootstrap 按钮，我在其中覆盖了样式表中的样式，因为我想让按钮变暗，现在该按钮具有 Bootstrap 的悬停效果，我怎样才能摆脱它...

html css twitter-bootstrap-3

回答 8 投票 0

如何显示未经授权的可以访问的错误

我正在使用 Bootstrap，它有 div class="alert notification"，它有一堆用于各种通知消息的类。我还有一个针对评论的 AJAX 销毁操作，我已经添加了 cancan 授权...

jquery ruby-on-rails ruby-on-rails-4 twitter-bootstrap-3 cancan

回答 3 投票 0

相同高度的 Bootstrap 列垂直对齐

我正在使用 Bootstrap 3，我需要具有相同的列高度，并且列的内容能够垂直对齐垂直... 我正在使用 Bootstrap 3，我需要具有相同的列高度，并且列的内容能够垂直对齐 <div class="row"> <div class="col-xs-12 col-sm-3"> vertical align top </div> <div class="col-xs-12 col-sm-3"> vertical align middle </div> <div class="col-xs-6 col-sm-3"> <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> </div> <div class="col-xs-6 col-sm-3"> vertical align bottom </div> </div> 请查看此处https://jsfiddle.net/4d2m74nc/4/ 这是可以实现的，但会剥夺引导程序的一些内置功能。主要是网格系统移动渲染的媒体查询。实现这一目标的最佳方法可能是使用弹性盒方法。演示。 <div class="row row-eq-height"> <div class="col-sm-3"> vertical align top </div> <div class="col-sm-3 vcenter"> vertical align middle </div> <div class="col-sm-3"> <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> </div> <div class="col-sm-3 vbottom"> vertical align bottom </div> </div> CSS .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .vcenter{ display:flex; flex-direction:column; justify-content:center; } .vbottom{ display:flex; flex-direction:column; justify-content:flex-end; } 第二种方法是使用绝对定位进行垂直对齐，并使用弹性盒来匹配高度。查看演示。 <div class="row row-eq-height"> <div class="col-sm-3"> vertical align top </div> <div class="col-sm-3"> <div class="vcenter"> vertical align middle </div> </div> <div class="col-sm-3"> <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> </div> <div class="col-sm-3"> vertical align bottom </div> </div> CSS .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .vcenter { position: absolute; top: 50%; } 另一种选择是使用 JavaScript 来为您修复高度和垂直对齐。您可以使用matchHeight.js。使用起来相当简单。您只需将要与另一个 <div> 高度匹配的所有列内容与类 .box 一起包装即可 <div class="row"> <div class="col-md-4"> <div class="box"> Content </div> </div> <div class="col-md-4"> <div class="box"> Content </div> </div> <div class="col-md-4"> <div class="box"> Content </div> </div> </div> 然后在 JavaScript 文件中的文档加载或 JQuery 链接后的 <script></script> 标记中实例化它。 $('.box').matchHeight(); 坚持使用 JavaScript 进行垂直对齐，您可以将 .vcenter 添加到您想要垂直对齐的 .box 元素，然后执行以下操作： var height = $('.vcenter').height(); $('.vcenter').css('margin-top', (height/2)); $('.vcenter').css('margin-bottom', -(height/2)); var $window = $(window); var windowsize = $window.width(); function checkWidth(){ if (windowsize < 440) { $('.vcenter').removeAttr("style"); } } $(window).resize(checkWidth); 计算 .box 的高度，然后除以 2 以确定内容的顶部和底部边距。然后我们确定窗口的宽度，并在调整大小时删除边距。这部分是未经测试的，但我相信理论上是可行的。这是 matchHeight.js 的 demo。这里有一个关于 Bootstrap 中列高匹配的有用博客。最后两种垂直对齐方法效果较差，但应该可行。 <div class="row flex-container"> <div class="col-xs-12 flex-item col-sm-3"> vertical align top </div> <div class="col-xs-12 flex-item col-sm-3"> vertical align middle </div> <img class="col-xs-6 flex-item col-sm-3" src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> <div class="col-xs-6 flex-item col-sm-3"> vertical align bottom </div> </div> 支持盒子的 CSS flex item 属性，它只是为了让您理解 .flex-container { display: -webkit-flex; display: flex; } .flex-item { border: 1px solid #000; padding: 20px; } 注意：我找到了一个有趣的解决方案，希望它对您有用，问候。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col d-flex justify-content-center align-items-stretch bg-primary"> <div class="align-self-center"> <h1>Hello!</h1> </div> </div> <div class="col d-flex justify-content-center align-items-stretch bg-primary-subtle"> <div class="align-self-center"> <h1>Hello!</h1> <h1>Hello!</h1> </div> </div> <div class="col d-flex justify-content-center align-items-stretch bg-secondary"> <div class="align-self-center"> <h1>Hello!</h1> <h1>Hello!</h1> <h1>Hello!</h1> </div> </div> </div> </div>

css twitter-bootstrap-3

回答 3 投票 0

如何在 bootstrap 移动版中隐藏网格中的一列

我觉得我想在 bootstrap 移动版本中隐藏网格中的一列有点棘手。让我们举个例子我想在 bootstrap 移动版中隐藏网格中的一列有点棘手。让我们举个例子 <div class="row"> <div class="col-xs-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div> </div> 在编码之上，我在移动设备查看时隐藏了图像部分。我想要的是我不想要图像部分的间距，即使它被隐藏为增加左侧部分以到达右侧。自 Bootstrap V4 以来，hidden-X 类已被删除。为了根据列宽隐藏列，请使用d-none d-X-block。基本上，您只需关闭要隐藏的尺寸的显示，然后设置更大尺寸的显示即可。对所有人隐藏 .d-none 隐藏在 xs .d-none .d-sm-block 隐藏在 sm .d-sm-none .d-md-block 隐藏在 md .d-md-none .d-lg-block 隐藏在 lg .d-lg-none .d-xl-block 隐藏在 xl .d-xl-none 取自这个答案. 因为您隐藏了“xs”中的第二列，您可以通过将类“col-xs-12”定义为 column1 来使用第一列的全宽。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div> </div> 如果您使用的是 bootstrap 4，和/或想要隐藏除超小视图以外的任何列，方法如下： Bootstrap 3： <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs"> </div> </div> 换句话说，您必须定义要隐藏列的每个单独的预定义视口大小。 Bootstrap 4：（少一点冗余） <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg-down"> </div> </div> 另外，如果你想在屏幕太大时隐藏一列： <div class="row"> <div class="col-md-12 col-sm-9"> </div> <div class="col-sm-3 hidden-md-up"> </div> </div> 还请注意，col-xs-[n] 在 bootstrap 4 中已被 col-[n] 替换你必须使用的是媒体查询。举个例子： @media (min-width: 1000px) { #newDiv { background-color: blue; } .col-xs-3 { display: block; } } @media (max-width: 999px) { #newDiv { background-color: red; width: 100%; padding-right: 50px; margin-right: 0px; } .col-xs-3 { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="newDiv" class="col-xs-9"><p>Hello World!</p></div> <div class="col-xs-3"><p>Hello to you to</p></div> 全屏查看屏幕响应在 Bootstrap 5 中，我们使用显示实用程序 (https://getbootstrap.com/docs/5.3/utilities/display/)。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image d-none d-sm-block"> <img src="https://placehold.co/100x100/"> </div> </div>

css twitter-bootstrap twitter-bootstrap-3

回答 5 投票 0

Bootstrap 下拉子菜单丢失

Bootstrap 3 仍在 RC，但我只是想实现它。我不知道如何放置子菜单类。即使 css 中没有类，甚至新文档也没有说明任何内容......

css twitter-bootstrap twitter-bootstrap-3 submenu bootstrap-5

回答 11 投票 0

我可以在 Twitter Bootstrap 的工具提示中使用复杂的 HTML 吗？

如果我查看官方文档，我可以看到一个名为 HTML 的属性：名称 |类型 |默认 |描述 ---------------------------------------------- ----------------------...

javascript html twitter-bootstrap-3 tooltip

回答 8 投票 0

如何根据屏幕尺寸更改背景图像，可能使用 Bootstrap

我有一个 background-image:url 在我的 CSS 中。问题是当我过渡到屏幕变为纵向的移动设备时。我有一个不同的肖像导向背景...