css相关内容

CSS图像缩放到填充?

我有一个网站,上面有完整的视窗图片,如 背景图像占据了导航栏下的整个容器。 我想让它在移动设备上,当我查看图像时,它会被放大/居中,这样图像就不会扭曲,而且我仍然可以看到其中的一些作为背景...我可能没有正确地解释它,我对设计不是很流利,但我认为这个样机不言而喻 红色表示原始图像边界,蓝色表示移动视区。我希望图像在移动设备上被裁剪/缩放。如何使用css来实现这一点?谢谢 编 ..
发布时间:2022-08-26 10:02:24 前端开发

将放大效果添加到引导图库

我想用bootstrap制作一个如下所示的图库: https://mdbootstrap.com/docs/standard/extended/gallery/ 一切都正常,但我想给这些图片添加一个悬停效果,所以我把它们都放在不同的容器里,这很管用,但现在图片不再对齐了,因为一些是水平的,另一些是垂直的:/ 有没有人有办法解决这个问题? 以下是我的项目代码: https://codep ..
发布时间:2022-08-26 09:33:35 前端开发

带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中的动画幻灯片

我需要用YouTube视频制作多项旋转木马,我找到了一个例子,并使用Bootstrap 5旋转木马和卡片为我工作,但旋转木马滑动时的动画不是流畅的,问题是旋转木马滑动时卡片重叠,我试图更改transform: translateX(%)的值,但动画不是那么流畅,有什么建议吗? 这是carosuel代码,它显示3张卡片,底部有视频和标题,您可以看到我正在使用iframe调用YouTube视频 ..
发布时间:2022-08-26 09:28:46 前端开发

与导航栏引导重叠的中央徽标

您好,我正在尝试让我的导航栏看起来像这样: 但我似乎想不出如何将图像放在导航栏的顶部。我正在使用Bootsrap 5。我还没有向导航栏添加任何css,但有没有一些属性可以用来将它带到前面。谢谢,这是html: ..
发布时间:2022-08-26 09:25:09 前端开发

在Bootstrap 5.0中使用Response重新排序div

我在使用Bootstrap V5.0进行网页设计时遇到了一个问题。 特别是,我有3个div A,B,C,我希望他们响应地重新排序,如下图所示。A是h2+p,B是2个按钮,C是图像。 我的第一种方法是将A和B分组为一组LG-6,将C分组为另一组LG-6,但这种方法是不合适的,因为代码必须遵循A-C-B的顺序才能拥有图片中的移动视图。 我在StackOverflow上搜索并尝试了多次关于这 ..
发布时间:2022-08-26 09:15:02 前端开发

Bootstrap 5-在网格显示中对齐内容

我有一个使用Bootstrap 5的应用程序。在该应用程序中,我需要布局一些内容,如下所示: +----------------------+-----------------------------------------------+ | Assignment Begins On | [date picker goes here] | +--- ..
发布时间:2022-08-26 09:09:31 前端开发

Bootstrap 5是否删除了行之间的间距?

我开始使用bootstrap 5,注意到行之间没有空格。我们是否必须显式使用spacing实用程序(如mb-3或mb-2等)来尝试了解删除行之间垂直空格的原因。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> ..
发布时间:2022-08-25 23:53:07 前端开发

带有html内容的Bootstrap 5弹出窗口

我正在尝试将bootstrap5弹出内容与HTML属性分开,就像您可以对其他组件所做的那样,但我无法使其工作。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) v ..
发布时间:2022-08-25 23:12:54 前端开发

使用sass 3自定义Bootstrap 5颜色时出现无效的CSS值错误

我想用sass更改bootstrap的默认主题颜色,问题是当我更改颜色并进行编译时,它会给出无效的CSS值错误。 我已经在YouTube上看了文档和一些教程,但我看不出问题出在哪里 我使用的是Bootstrap 5.1.0,sass 3 这是我的SCSS文件: @import "../../node_modules/bootstrap/scss/variables"; $theme ..
发布时间:2022-08-25 22:54:25 前端开发

使用Bootstrap进行响应的div放置

我需要将一些DIV放在它们的父容器中,无论它是body、表的cell还是另一个div,Bootstrap 5,如附图所示: 如果DIV为偶数,则它们应取可用宽度的50%,由2放置在单行中。或者,如果DIV为奇数,则最后一个应占可用宽度的100%,而前一个仍占可用宽度的50%,并在一行中放置2。 最好可以更改DIV的顺序(如Mobile View示例中的)。 使用UIKit使用一些 ..

使用Flex CSS和Bootstrap实现响应式布局

我已经在台式机、平板电脑和手机大小之间试验了一段时间,但在下面的布局中遇到了问题。 我使用的是Bootstrap中的网格布局,但由于它是两列,随着宽度缩小,第二列位于左侧的Main Content部分下方。我想将其拆分为状态下方的屏幕大小。 这是起始视图: 这是我希望发生的事情: 这将是手机视图: 因此,宽视图在测试期间会缩小,我希望它跳转到移动视图,在该视图中,顶部 ..
发布时间:2022-08-25 22:18:05 前端开发

Bootstrap 5表单组、表单行、内联表单不起作用

我正在尝试将我的应用程序从Bootstrap 4更新到Bootstrap 5,但使用表单类的所有元素(如form-group、form-row、form-inline)都完全损坏。 推荐答案 原因是form-group、form-row和form-inline类已在引导5中删除: 突破性变化:删除了网格系统的特定于表单的布局类。使用我们的网格和实用程序,而不是.form-grou ..
发布时间:2022-08-25 21:49:23 前端开发

Bootstrap 5-卡元素在底部对齐

好的,我是Bootstrap的新手,我尝试将一个按钮元素一直放在Card的底部,即使正文文本很小。但是,我总是收到这个结果,它没有将我的按钮放在我需要的右下角位置。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> ..
发布时间:2022-08-25 21:40:29 前端开发

如何在Bootstrap 5表格单元格中垂直对齐文本?

我创建了一个表格,并希望其中一个单元格具有垂直对齐方式。引导程序5文档states: 更改元素的垂直对齐方式 公用事业。请注意,垂直对齐仅影响内联, 行内块、行内表、和表格单元格元素 我只是做了一个小的对比表,以演示我的混乱: 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> ..
发布时间:2022-08-25 21:36:24 前端开发

如何使用Bootstrap 5更改选择文件和文本

是否无法使用类似于Bootstrap 4的CSS更改Bootstrap 5中输入文件的Choose文件文本? 以及如何向";未选择文件添加页边距? 推荐答案 Bootstrap 5 Beta版不再提供使用伪元素覆盖browser's file input defaults的custom file input like Bootstrap 4。因此,您必须使用JS或创建自己 ..
发布时间:2022-08-25 21:12:51 前端开发