bootstrap-4 相关问题

Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速,移动优先的网站和Web应用程序。

错误折叠 Bootstrap 4.1 菜单

作为这些页面修改的一部分,我修改了菜单的行为,即单击某个项目时菜单会在移动设备上折叠。它的工作几乎完美无缺,除了一个......

回答 1 投票 0

Fieldset:它的预期用途是什么?

我一直在阅读有关 fieldset 标签的内容,但我必须说我不太了解它的预期用途。它应该用于对表单控件进行分组,但是有什么用呢?有没有经过什么特殊处理...

回答 1 投票 0

导航栏中左右对齐菜单项的问题

我有以下 html,它显示了我想要的内容,但不是我想要的位置;-)。 我希望“文件”下拉列表位于左侧,其余下拉列表位于右侧。 我已将我的 css 文件包含为...

回答 1 投票 0

如何在 Bootstrap 导航栏中嵌入视频?

我有一个使用 Bootstrap 创建的简单菜单。左边是文字,右边是视频。我想实现视频延伸到页面顶部,并带有

回答 1 投票 0

仅 CSS 解决方案来对齐按钮折叠行为

我在 Bootstrap 模板中排列了两个(实际上是几个)按钮。当按下按钮时,其下方会打开折叠。我已经在第一个中展示了所需的行为...

回答 1 投票 0

如何使渐变合并到导航栏而不是“弹出”颜色变化?

我试图使粘性导航栏进入渐变状态,然后在固定位置变回黑色,但是当它移动时,它应该平滑地合并到渐变中。 当我使用导航栏滚动时...

回答 1 投票 0

浏览器列表错误:未知的浏览器专业

我正在尝试在我的角度安装中使用 bootstrap 4。我跑了 npm install --save bootstrap@next 但我在运行时有一个中断: ./node_modules/css-loader?{"sourceMap":false,"importLoaders":...

回答 10 投票 0

动态拉动主体的引导模态重定向问题

我在我们的管理网站上使用 Bootstrap Modals 来实现多种功能。 这些页面受我们的管理员登录保护,因此如果有人获得 URL,他们就无法执行代码等。非常标准。 我...

回答 1 投票 0

下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用

我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它 https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright 他们已经给出了代码 &...

回答 1 投票 0

php Blade 并排对齐扩展布局

我正在尝试构建一个响应式仪表板,使用侧边栏在右侧进行导航,我将侧边栏构建为布局,并通过使用

回答 1 投票 0

Bootstrap 4 - 如何使图像转到右侧?

我正在尝试将一个简单的图像排成一行,并将其放置在页面的右侧。 如果我想用文本来做到这一点,我会简单地这样做: 我正在尝试将一个简单的图像排成一行,并将其放置在页面的右侧。 如果我想用文本来做到这一点,我会简单地这样做: <div clas="row"> <div class="col text-right"> <h1>Im on the right</h1> </div> </div> 好像没有对应的image-right。有 float-right,但这会将下面的文本拉到上方,这不是我们想要的。 尝试过这个,但没有效果: <div class="row"> <div class="col"> <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo"> </div> </div> 作为一名老派 html 表用户,我认为我可以在左侧创建虚拟空列,尽管这不是我们想要的,因为当屏幕变小时,列会“中断”: <div class="row"> <div class="col-xs-10"> <div> <div class="col-xs-2"> <img src="images/MyLogo.png" style="height: 200px" alt="our Logo"> </div> </div> </div> 但这也会使图像牢牢地粘在左侧。 有什么建议如何将图像放在页面的右侧,并保持左侧的空间为空白吗? 这里不太清楚你的目标是什么(添加更多细节或提供准确的 html 代码可能会澄清问题),但如果我理解正确的话,你需要一个图像来获取整行并向右浮动,并在右边留出空间图像的左侧应该是空的。如果是这种情况,这应该适合你: <div class="row"> <div class="col"> <img src="images/MyLogo.png" class="pull-right" style="height: 200px" alt="our Logo"> </div> </div> .col { text-align: right; } .pull-right { margin: 0 0 0 auto; } 您可以使用 Flex 实用程序d-flex justify-content-end: <div class="row"> <div class="col d-flex justify-content-end"> <img src="" alt=""> </div> </div> 参考 Bootstrap DOCS 您可以使用rounded float-right代替pull-right: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="row"> <div class="col"> <img src="https://dummyimage.com/150x100/000/fff" class="float-right" alt="our Logo"> </div> </div>

回答 3 投票 0

当我缩小到移动显示时,如何使两个重叠的弹性盒项目并排在一行中以具有响应式显示?

我正在编写一个小的 HTML CSS 代码,用于在一行中并排显示两个重叠的内容(图片)。当我将宽度缩小到移动显示时,我的目标是将它们一个一个地显示......

回答 1 投票 0

使用`bs_theme()`时减少引导表单元格填充

# 标题 ## 加载包 图书馆(闪亮) 图书馆(tidyverse) 库(DT) 库(bslib) 用户界面 <- navbarPage("Test", inverse = T, collapsible = T, ...

回答 1 投票 0

使用 Bootstrap 4 将动态 div.card 水平居中

我正在基于 Bootstrap 4 的网站上列出数据库中的文章。我希望块 (div.card) 始终水平居中,无论有多少块,最多 3 个块...

回答 1 投票 0

目标类[文件]不存在

我想在我的代码中添加一个甜蜜的警报,但是当我这样做时,它给了我这个错误,我使用 laravel 12 PS C:\xampp\htdoc

回答 0 投票 0

Summernote 样式不起作用

我做了一个小提琴来暴露我在桌面上遇到的同样的问题。 在summernote编辑器中,应用字体大小和字体系列是有效的,但我无法将字体设置为粗体、斜体、删除线、超级字符...

回答 2 投票 0

Google Chrome 多个背景图片位置

我想在同一个元素上显示多个背景图像。 我的实现如下所示:(使用引导程序) 我想在同一个元素上显示多个背景图像。 我的实现如下所示:(使用引导程序) <a class="left-icon icon-share list-group-item list-group-item-primary list-group-item-action">Exportable</a> .list-group-item-action.left-icon { background-image: var(--icon-auto-url), var(--list-group-action-icon); background-position-x: var(--list-group-icon-padding-x), right var(--list-group-icon-padding-x); background-position-y: center; } 这在 Safari 中可以按预期工作,但在 Chrome 中却不行。有什么想法我做错了什么吗? 野生动物园: 谷歌浏览器: 并非所有网络浏览器都以相同的方式读取代码。您的代码的问题是所有浏览器(包括 Chrome)均不支持“background-position-x”。更广泛使用的属性就是“背景位置”。 您可以执行以下操作: .list-group-item-action.left-icon { background-image: var(--icon-auto-url), var(--list-group-action-icon); background-position: var(--list-group-icon-padding-x) center, right var(--list-group-icon-padding-x) center; } 这样,您就可以将 x 和 y 坐标放入应该支持的背景位置属性中。

回答 1 投票 0

如何防止react-json-schema-form中的字段逐行出现

我正在使用 React-json-schema-form 创建表单。我不明白如何更改我创建的表单的布局。它们默认显示在行中,并向...中的每个字段添加类

回答 1 投票 0

如何使 schema 依赖关系以 React json 形式显示在一行中

我正在使用 React json 架构表单(https://react-jsonschema-form.readthedocs.io/)来创建通过架构呈现的表单。我正在尝试根据选择的...

回答 1 投票 0

从导航栏切换中排除项目

我如何从 Bootstrap 4 上的折叠中排除 ['label' => 'Home', 'url' => ['/site/index']]? 使用 yii ootstrap4\NavBar; 使用 yii ootstrap4\Nav; 导航栏::开始([ 'brandLabel' => 'NavBa...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.