草庐IT

bootstrap-grid

全部标签

html - 当 Bootstrap 列为奇数时如何居中?

我正在使用Bootstrap创建一个图像slider,但遇到了一个我似乎无法解决的问题。在此slider的每个实例下,我将有3列缩略图(每行4个)。但是,有些slider不会有4个缩略图,有些会有1、2或3个。在这些情况下,我想将缩略图水平居中,同时保持与有4个缩略图时相同的15px间距。现在当只有2个缩略图图像时,这很容易,因为我可以简单地在缩略图集前后添加一个空的3列div。当只有1个缩略图时,我可以删除float并使用margin:0auto;居中,但是当有3个时我不知道该怎么做缩略图。谁能告诉我实现此目标的最佳方法是什么?我当时认为能够设置半列会很好,这样我就可以在缩略图前后放

javascript - Bootstrap Collapse - 打开给定的 id 片段

想象一个Bootstrapcollapse有3个部分.........有没有简单的方法让插件打开给定的HTTPfragmentidentifier?示例http://myproject/url#accordionTwo将打开第二个Accordion 最佳答案 $("#accordionTwo").collapse('show');要打开给定的HTTP片段标识符,试试这个:$(document).ready(function(){varanchor=window.location.hash;$(".collapse").collaps

javascript - Bootstrap Collapse - 打开给定的 id 片段

想象一个Bootstrapcollapse有3个部分.........有没有简单的方法让插件打开给定的HTTPfragmentidentifier?示例http://myproject/url#accordionTwo将打开第二个Accordion 最佳答案 $("#accordionTwo").collapse('show');要打开给定的HTTP片段标识符,试试这个:$(document).ready(function(){varanchor=window.location.hash;$(".collapse").collaps

javascript - 从 angularjs 更改 Bootstrap 进度条宽度

我是Angularjs的新手,我正在尝试在Controller中的值发生变化时更新进度条的宽度。我有这样的东西:${{getTotal()}}({{getPercentage()}}%)10%Complete(warning)我的Controller中有类似的东西:$scope.total=254.78;$scope.threshold=15000;$scope.getPercentage=function(){return(($scope.total*100)/$scope.threshold).toFixed(2);}$scope.getTotal=function(){retur

javascript - 从 angularjs 更改 Bootstrap 进度条宽度

我是Angularjs的新手,我正在尝试在Controller中的值发生变化时更新进度条的宽度。我有这样的东西:${{getTotal()}}({{getPercentage()}}%)10%Complete(warning)我的Controller中有类似的东西:$scope.total=254.78;$scope.threshold=15000;$scope.getPercentage=function(){return(($scope.total*100)/$scope.threshold).toFixed(2);}$scope.getTotal=function(){retur

html - 如何在 Bootstrap 3.1 中的图像上显示文本

我想添加显示在图像上的文本。基本上,这就是我的代码的样子:TITLEHERELetusbuildyourpreviewforfreethisisatest我无法将“这是一个测试”添加到图像的建议部分。我想使用bootstrap.min.css的参数来保持一切一致。此外,由于这将是一个响应式设计网站,我希望文本能够响应图像,这样它就不会失去它的位置如果有人能提供帮助,那就太好了:) 最佳答案 我可以建议一种方法来解决这个问题:您可以将轮播与单个元素一起使用,因为您可以通过标题在轮播图像上插入文本:Insertyourtexthere!

html - 如何在 Bootstrap 3.1 中的图像上显示文本

我想添加显示在图像上的文本。基本上,这就是我的代码的样子:TITLEHERELetusbuildyourpreviewforfreethisisatest我无法将“这是一个测试”添加到图像的建议部分。我想使用bootstrap.min.css的参数来保持一切一致。此外,由于这将是一个响应式设计网站,我希望文本能够响应图像,这样它就不会失去它的位置如果有人能提供帮助,那就太好了:) 最佳答案 我可以建议一种方法来解决这个问题:您可以将轮播与单个元素一起使用,因为您可以通过标题在轮播图像上插入文本:Insertyourtexthere!

javascript - 使用 Bootstrap 创建响应式标签(它们应该在较小的屏幕上自动堆叠)

如何创建响应式选项卡,这些选项卡可以使用Bootstrap自动堆叠。我的导航代码是-NormalHoverSelected....我需要它们在小屏幕上查看时转换为堆叠标签。现在它只是将选项卡移动到多个看起来很丑陋的喜欢中。我想要类似导航栏折叠的东西,但没有激活折叠的按钮。 最佳答案 这应该有效:@media(max-width:480px){.nav-tabs>li{float:none;}} 关于javascript-使用Bootstrap创建响应式标签(它们应该在较小的屏幕上自动堆叠

javascript - 使用 Bootstrap 创建响应式标签(它们应该在较小的屏幕上自动堆叠)

如何创建响应式选项卡,这些选项卡可以使用Bootstrap自动堆叠。我的导航代码是-NormalHoverSelected....我需要它们在小屏幕上查看时转换为堆叠标签。现在它只是将选项卡移动到多个看起来很丑陋的喜欢中。我想要类似导航栏折叠的东西,但没有激活折叠的按钮。 最佳答案 这应该有效:@media(max-width:480px){.nav-tabs>li{float:none;}} 关于javascript-使用Bootstrap创建响应式标签(它们应该在较小的屏幕上自动堆叠

javascript - 如何在 Bootstrap 中使用间距实用程序类

在此article我看到了Bootstrap4SpacingUtilityClasses,他在className中使用了m-b-lg。但是当我在meteorjs上使用它时没有任何反应。我是否遗漏了什么或缺少插件?LoginForgotyouremailorpassword?LoginNewtoArcademy?Signupnow. 最佳答案 Bootstrap5测试版-2021年更新现在Bootstrap5支持RTL,left和right的概念已经更改为start和end。因此*l-和*r-间距实用程序已更改pl-*=ps-*pr-