bootstrap-4 相关问题

我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为位置：固定。整个吐司部分如下所示：我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为 postion: fixed。整个吐司部分是这样的： <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div> 您可以在 this JSFiddle 中找到完整的工作代码。该作品按原样工作得很好，但现在我想将 toast 的宽度设置为视口的 50% 左右。在 <div id="toastContainer"...> 行中，我尝试设置 width 属性： <div id="toastContainer" style="position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 或者我尝试设置left： <div id="toastContainer" style="position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 但在这两种情况下，出现的 toast 的 width 都不会改变（仅其水平 position）。如何设置 Bootstrap 4 toast 的宽度？我找到了办法。它也有帮助，它在网站上，我可以直接在上面尝试东西，让事情变得更容易。我不知道你是否熟悉 bootstrap 但是有这样的东西可以让你通过将 class="col-x" （x 在 1-12 之间）的东西放入 a 中来“控制”东西的长度div 与 class="row"。 <div class="row"> <button type="button" class="btn btn-primary col-8" id="liveToastBtn">Toast it</button> </div> 正如你所看到的，这就是我所做的，只需在按钮的类中添加 col-8 即可，你可以更改它，但我发现 6 看起来不像 50% 8 更接近。然后你需要一些CSS来使按钮居中: .row{ display:flex; justify-content:center; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶

css twitter-bootstrap bootstrap-4 css-position width

回答 1 投票 0

如何让首选颜色方案灯光使用默认颜色值？

而不是单独定义 Preferred-color-scheme: light 上的所有更改，如何才能使其自动应用所有默认引导颜色值？

html css bootstrap-4 media-queries themes

回答 1 投票 0

电脑和移动设备上不同的英雄背景图片

在我的页面上，我有一个带有背景图像和标题的英雄部分。图像尺寸为 1920x500 像素。在我的页面上，我有一个带有背景图像和标题的英雄部分。图片尺寸为1920x500px。 <section class="bgimage d-flex align-items-center " style="background-image:linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)),url(https://mikulas.web87.hu/images/site_background/7304-1.jpg)"> <div class="container"> <div class="row"> <div class="col text-center"> <h1 class="bgimage_title text-white">Rendelés menete</h1>  </div> </div> </div> </section> 在全高清显示器上，一切正常，但在移动和小型设备上，图像尺寸和位置不是最好的，所以我想更改图像。您可以在这里查看我的页面： <ul class="bxslider"><li> <picture> <source media="(max-width: 991px)" srcset="https://mikulas.web87.hu/images/homepage_slideshow/18-1.jpg" /> <source media="(min-width: 992px)" srcset="https://mikulas.web87.hu/images/homepage_slideshow/300-1.jpg" /> <img src="https://mikulas.web87.hu/images/homepage_slideshow/300-1.jpg" alt="" /> </picture> </li></ul> 我只尝试搜索一些示例代码，但没有找到任何相关的代码，并给出了不同的图像。我理解您的意思，如果您需要根据用户访问您网站的设备的大小使用不同的图像，我建议您使用 srcset 元素上的 img 属性。这是示例代码： /* Basic Section Styling */ section { position: relative; width: 100%; height: 200px; /* aspect-ratio: 16 / 9; You can use also use Aspect Ratio of 1920x1080 */ } /* This pseudo-class is for the overlay effect */ section::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)); } /* This will be the image that will be displayed */ img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* This is to place the content above the image */ .container { position: relative; z-index: 1; } <section class="bgimage d-flex align-items-center"> <img src="https://placehold.co/3200x800.png" srcset=" https://placehold.co/800x200.png 800w, https://placehold.co/1600x400.png 1600w, https://placehold.co/3200x800.png 3200w " />     <div class="container"> <div class="row"> <div class="col text-center"> <h1 class="bgimage_title text-white">Rendelés menete</h1>  </div> </div> </div> </section> 注意事项：如果您已经加载了浏览器第一次重新加载的较大图像，之后缩小屏幕尺寸不会将图像变回小尺寸，并且将保持大尺寸如果您想查看小图像，则必须硬重新加载浏览器（Ctrl + F5）以从浏览器缓存中清除图像。用户屏幕尺寸显然不可调整，因此如果他们首先在小屏幕上打开它，这不会给用户带来任何问题。如果您想了解srcset如何工作的详细信息和完整解释，我强烈建议您阅读此博客，我也使用此博客作为回答您问题的参考。博客链接和信用转到：https://blog.webdevsimplified.com/2023-05/responsive-images/

html css bootstrap-4 responsive-design

回答 1 投票 0

引导自定义大小的视频嵌入不接受最大高度

我在这个引导程序轮播中嵌入了一个高视频。幻灯片 2 上的电话视频“不是引导程序标准尺寸”，即。是 4x5，所以我使用了自定义代码：类 =“vidbox 嵌入-响应式嵌入-

css bootstrap-4 bootstrap-5

回答 1 投票 0

如何在引导程序中创建自定义视频嵌入比例？

使用 16x9 等标准尺寸将视频嵌入引导程序轮播中，使用嵌入响应标签似乎可以很好地使用 1x1... 使用 16x9 等标准尺寸将视频嵌入到引导程序轮播中，使用嵌入响应标签似乎可以很好地使用 1x1...  <div class="carousel-item"> <div id="squarevid" class="vidbox **embed-responsive embed-responsive-1by1**" style="max-height: 80vh;"> 但是当您有非标准视频时它就不起作用了？我已经尝试使用下面教程中的比率，但无法让它发挥作用。有什么想法吗？ <div class="carousel-item"> <div id="squarevid" class="vidbox **embed-responsive embed-responsive-4by5**" style="max-height: 80vh;"> 我一直在参考有关：嵌入和自定义比率的文档： https://getbootstrap.com/docs/5.0/helpers/ratio/#custom-ratios https://getbootstrap.com/docs/4.3/utilities/embed/ 使用以下公式添加您的比例： .embed-responsive-XbyY { padding-top: 100% * Y / X; } 您的情况： .embed-responsive-4by5 { padding-top: 125%; }

css bootstrap-4

回答 1 投票 0

bootstrap 4 导航活动链接颜色

我想将活动菜单链接的颜色更改为绿色。我尝试了各种方法（查看开发者模式从框架应用了哪些规则），但它不起作用。你能建议一下吗...

css bootstrap-4 navigationbar

回答 6 投票 0

bootstrap-4 相关问题

最新问题