bootstrap-4 相关问题

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

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

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

在我的页面上，我有一个带有背景图像和标题的英雄部分。图像尺寸为 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> <!--<p class="bgimage_text text-white"></p>--> </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 " /> <!-- 1st URL image will be shown if the screen size is equal or less than 800px --> <!-- 2nd URL image will be shown if the screen size is equal or less than 1600px --> <!-- 3rd URL image will be shown if the screen size is equal or less than 3200px --> <!-- You will put your image URL with the desired width of the screen --> <div class="container"> <div class="row"> <div class="col text-center"> <h1 class="bgimage_title text-white">Rendelés menete</h1> <!-- Your rest of the content goes here --> </div> </div> </div> </section> 注意事项： 如果您已经加载了浏览器第一次重新加载的较大图像，之后缩小屏幕尺寸不会将图像变回小尺寸，并且将保持大尺寸 如果您想查看小图像，则必须硬重新加载浏览器（Ctrl + F5）以从浏览器缓存中清除图像。 用户屏幕尺寸显然不可调整，因此如果他们首先在小屏幕上打开它，这不会给用户带来任何问题。 如果您想了解srcset如何工作的详细信息和完整解释，我强烈建议您阅读此博客，我也使用此博客作为回答您问题的参考。 博客链接和信用转到：https://blog.webdevsimplified.com/2023-05/responsive-images/

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

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

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

使用 16x9 等标准尺寸将视频嵌入引导程序轮播中，使用嵌入响应标签似乎可以很好地使用 1x1... 使用 16x9 等标准尺寸将视频嵌入到引导程序轮播中，使用嵌入响应标签似乎可以很好地使用 1x1... <!-- Video Slide --> <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%; }

bootstrap 4 导航活动链接颜色

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

更改 ng-bootstrap 轮播中的箭头颜色

我正在使用 ng-bootstrap 创建轮播，我想将箭头颜色或图像从白色更改为黑色，因为我有白色背景图像并且它们是不可见的。我的问题是我无法获得跨度，...

如何设置 Bootstrap 4 toast 的宽度？

我有一个带有 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">&times;</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; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶

表格标题与列未对齐。第 1 列上方的所有标题。ASP.NET Core 6

一个奇怪的。我正在使用 ASP.NET Core 6、jQuery 和 Bootstrap 4。应用程序中的大多数表的标题与列未对齐。所有标题似乎都在第一列上方...

自从迁移到 Angular 13 以来未捕获 DOMException

我在我的 Angular 项目中使用 Bootstrap 4.6.2。其中一个组件有一张带有 ngb-accordion 的表格。在我将项目迁移到 Angular 13 之前，一切都运行良好。 现在，我得到以下内容

一行上的多个单选按钮 - Bootstrap 4

我尝试了文档中的代码（https://v4-alpha.getbootstrap.com/components/forms/#form-controls）并找到了如何实现这一点： 代码如下： ... 我尝试了文档中的代码（https://v4-alpha.getbootstrap.com/components/forms/#form-controls）并找到了如何实现这一点： 代码如下： <div class="container"> <form> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <fieldset class="form-group row"> <legend class="col-form-legend col-sm-2">Radios</legend> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled </label> </div> </div> </fieldset> <div class="form-group row"> <label class="col-sm-2">Checkbox</label> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Check me out </label> </div> </div> </div> <div class="form-group row"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> </div> 但是，我希望能够像这样将所有内容内联： 这可能吗？怎么办？ 稍后编辑：与示例中的代码类似，我需要某种带有 col-sm-2 的标签，然后将所有单选按钮放在 col-sm-10 容器中 后来编辑：我稍微编辑了 Abdeslem Charif 的代码并得到了我所需要的，非常感谢。请参阅下面的代码： <div class="form-group row"> <label class="col-sm-2">Radio: </label> <div class="col-sm-10"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <label class="form-check-label" for="inlineRadio1">Option one</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <label class="form-check-label" for="inlineRadio2">Option Two</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> <label class="form-check-label" for="inlineRadio3">Option tree</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> <label class="form-check-label" for="inlineRadio3">Option four (disabled)</label> </div> </div> </div> 使用 radio-inline 类 <div class="container"> <form> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <fieldset class="form-group row"> <legend class="col-form-legend col-sm-2">Radios</legend> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input radio-inline" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one</label> <label class="form-check-label"> <input class="form-check-input radio-inline" type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two</label> <label class="form-check-label disabled"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three</label> </div> </div> </fieldset> <div class="form-group row"> <label class="col-sm-2">Checkbox</label> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Check me out </label> </div> </div> </div> <div class="form-group row"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> </div> 使用内联样式 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <label class="form-check-label" for="inlineRadio1">Option one</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <label class="form-check-label" for="inlineRadio2">Option Two</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> <label class="form-check-label" for="inlineRadio3">Option tree</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> <label class="form-check-label" for="inlineRadio3">Option four (disabled)</label> </div> 如果您希望单选按钮出现在同一行，请使用 .radio-inline 类 <div class="radio"> <label class="radio-inline"><input type="radio" name="optradio">Option 1</label> <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> <label class="radio-inline"><input type="radio" name="optradio">Option 3</label> </div> 您可以使用 div class="row" 来完成此操作，然后使用其网格系统作为列 https://getbootstrap.com/docs/4.0/layout/grid/ 问题：如何内联显示多个单选字段 修复细节：在自己的div中添加带有标签的所有其他单选字段，将它们组合在一个父级中div，然后在父级上使用css flex属性divflexbox的基本概念 .displayFlex { display: flex; } 注释： 为了控制单选字段状态，我们可以将所有单选字段的 name 属性设置为相同。 但是如果我们需要所有单选字段的状态，那么我们可以在按键更改时添加事件监听器。并通过覆盖 value 的默认 "on" 来根据要求分配单选字段值。 输入类型=“无线电”

如何解决 Dashploty 中的重复回调输出错误

在输出回调中： 页面内容.children 输出 0 (page-content.children) 已在使用中。 任何给定的输出只能有一个设置它的回调。 要解决这种情况，请尝试...

Bootstrap 4 - 折叠外的导航栏项目

好吧，我不得不承认，即使在 BS3 中，我也一直在努力正确地工作。但我希望在折叠的容器外部保持持久的导航栏链接。 ...

Bootstrap：使用单个选项卡导航控制多个选项卡面板

我想用一个选项卡导航来控制两个不同的选项卡内容。 在 Bootstra 3 中，我有一个用逗号分隔数据目标的解决方案（如本例所示：https://stackoverflow.com/a/19719859/

Laravel - 自定义 CSS 和 Bootstrap

我有一个刀片文件，其中有一个表正在从执行存储过程的控制器获取值。 当我使用时，问题出在我的刀片文件上 ...

如何根据引导卡中的宽度和高度调整图像？

我想在卡片中给出图像的宽度和高度（300px;300px;）： 我想在卡片中给出图像的宽度和高度（300px;300px;）： <!-- Card Start From Here --> <div class="card" style="width: 35rem;"> <img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <!-- Card Start From Here --> 产量缩水了： 如果我删除下面的代码行，那么图像会很长但不会缩小： style="width:35rem;height:20rem;" 我已经尝试过： object-fit:cover;(Check all properties like fill, scale-down) 还尝试了一些CSS： <style> .clsAutofit{ height:300px; width:300px; } .clsImg{ max-width:100%; max-height:100%; } </style> <div class="clsAutofit"> <img src="/demo/img/1.jpeg" class="clsImg" /> </div> <!-- This also not working in card --> 我还尝试了一些属性： <style> img.one { display: block; object-fit: contain; max-width:500px; max-height:280px; width: auto; height: auto; } img.two { object-fit: contain; width: 535px;; height: 535px; } .box { width: 30%; height: 200px; border: 5px dashed #f7a239; } .containerTY { width: 60%; height: 500px; } .containerTYZ { max-width: 100%; } .thumbnail { width: 500px; height: 400px; } .img4R { width: 100%; height: auto; max-width: 50vw; } </style> 我尝试过，但还没成功。 任何想法或建议都欢迎。 你的方法没问题。问题是，引导类属性往往有!important。 因此将自定义 style.css 放在 bootstrap.css 下，这样它比 bs 具有更高的优先级， 然后使用： .my-image{ height : 300px !important; width: 300px !important } 将图像与类.my-image绑定，清除内联CSS样式，然后检查这一点。 .clsImg{ max-width:100%; width: 100%; height: auto; object-fit:cover; } 使用 img-fluid 表示图像，您还可以使用 w-25 w-50 w-100 表示 lg、md、sm 等设备 @media (min-width: 768px) { .w-md-50{width:50% !important;} } @media (min-width: 992px) { .w-lg-75{width:75% !important;} } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row pt-5 w-100 mx-auto"> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> </div> </div>

为什么响应式图像在弹性容器内缩小并且不占据响应式屏幕尺寸上的整个空间？

我想防止图像在弹性盒内收缩，从而在弹性容器内留下太多空间。事实上，图像是使用 Bootstrap 5 类中的 img-fluid 类来制作响应式的......

Bootstrap 4 从下拉按钮中删除插入符号

在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（向下的小箭头），但我不知道如何在 Bootstrap 4 中执行此操作，因为它们不再使用 在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（向下的小箭头），但我不知道如何在 Bootstrap 4 中执行此操作，因为它们不再使用 <span class="caret"></span>。 <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> 只需删除dropdown-toggle！ 这是一个例子： https://jsfiddle.net/ydnosrLw/ 它是用CSS完成的。做类似的事情： .dropdown-toggle:after { content: none } 您可以通过从元素中删除 dropdown-toggle 类来删除 Bootstrap 4 中的插入符号。所以代替这个： <button class="btn btn-outline-secondary dropdown-toggle" ...> 您的按钮将是 <button class="btn btn-outline-secondary" ...> 这不会有任何副作用，并且它仍然可以作为下拉菜单正常运行。 在 Bootstrap 4 中，您可以通过设置 $enable-caret sass 变量 false 来删除插入符号表单下拉按钮。但您必须在导入 bootstrap sass 文件之前设置此变量。 // Your variable overrides $enable-caret: false // Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap"; 我会在电话中正常使用下拉菜单，Apple rimane contornato di blu come se prende il contorno del bottone prima tu. 落下 行动 另一个动作 这里还有其他东西 questo è ili se qualcuno mi dà qualche suggerimento

我正在尝试使用引导程序实现以下目标

点击此处查看图片 两列： [第一列一行（包含第二列两行）] [第二列两行] 我没有引导程序方面的专业知识。你能帮我证明...

Bootstrap 格式中添加的 Div 弄乱了我的布局

在我将每个 H1 分成单独的部分之前，我的代码在右侧有一个图像，请在编辑之前查看页面图片 但现在 iv 分成了 div，图片位于左上角......

Bootstrap 4 与 Angular 17 兼容

我正在从事的项目目前使用的是 Angular 15，我们使用的是 Bootstrap 4.6.2。我们计划在 Angular 17 发布时使用它。 Angular 17 会支持 bootstrap 的版本吗...