bootstrap-4 相关问题

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

我正在使用引导日期选择器，当我打开下拉菜单更改年份时，它仅显示 20 年...当前年份.. 10 年前和 10 年后。我怎样才能改变它并使其显示40...

c# bootstrap-4 datepicker

回答 2 投票 0

我正在尝试将一些文本左对齐为大，居中对齐为中，右对齐为小。但我无法让它发挥作用。我正在使用 vue-bootstrap。我正在尝试将一些文本左对齐为大，居中对齐为中，右对齐为小。但我无法让它工作。我正在使用 vue-bootstrap。 <div class="container"> <b-row class="row"> <b-col sm="4" class="my-auto text-lg-left text-md-center text-sm-center"> <span class="text-white"> 2020 copyright, All rights reserved. </span> </b-col> <b-col sm="4" class="mt-2 text-center"> <p>Some text</p> </b-col> <b-col sm="4" class="mt-2 text-right text-sm-center"> <p>Some text</p> </b-col> </b-row> </div> 如何在不同视口上对齐文本？ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <p class="text-lg-left text-md-center text-sm-center"> 2020 copyright, All rights reserved. </p> <quote>Bootstrap v4.3.1 is required, v4.5.3 is recommended</quote> 引导程序您的类应该位于“p”标签内。 <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> 要按照您提到的顺序对齐文本，请使用： <p class="text-right text-md-center text-lg-left">Something</p>

html bootstrap-4 bootstrap-vue

回答 2 投票 0

悬停效果不会调整我的按钮大小

我试图启动相同的效果，如下所示：正如您所看到的，当鼠标悬停在按钮上时，按钮具有缩放和褪色的白色效果。我在我的包上尝试了同样的事情...

html css bootstrap-4

回答 2 投票 0

如何在上传前预览多个图像多个div - jQuery

我有一个用于上传多个图像的 Bootstrap Modal。当用户点击“添加产品图像”按钮时，它将生成一个新的图像上传输入表单，当用户选择图像时，它将生成

jquery bootstrap-4

回答 3 投票 0

Bootstrap 的 JS 无法在 React 中运行/加载

我安装了一个基本的反应应用程序 npx create-react-app appnamehere 然后我安装了 bootstrap （也尝试了 v4 和 v5） npm 安装引导程序然后将它们加载到我的 App.js 上导入“引导/dis...

javascript html reactjs bootstrap-4 bootstrap-5

回答 1 投票 0

如何在 Bootstrap 网站中添加徽标/客户端滑块

我正在尝试向我正在开发的网站（此处链接的网站）添加徽标/客户端滑块。 <

javascript html css bootstrap-4 slider

回答 2 投票 0

如何在引导程序中将这些按钮垂直居中在容器的中间？

这将是一个愚蠢的问题，但由于某种原因，我无法在页面中间居中对齐这些按钮。我想让它们在中间堆叠在一起......

html css bootstrap-4

回答 4 投票 0

为什么绝对位置在 bootstrap 中与 keywords.js 一起工作？

我试图理解为什么绝对位置在元素上的工作方式如此。我知道具有绝对位置的元素是相对于其第一个位置定位的（不是...

javascript bootstrap-4 position particles.js

回答 1 投票 0

为什么我的 p 元素没有使用 boostrap flexbox 属性居中对齐中心？

这是我关心的代码：版权所有2019... 这是我关心的代码： <div class="container-fluid d-flex align-items-center justify-content-between" id="footer"> <div>Copyright 2019<span>©</span></div> <div>Back to Top</div>  </div> 如果你注释掉div并尝试使用p标签，则align-items中心类不起作用。为什么该类适用于 div 元素而不适用于 p 元素？只需删除 <p> 的边距即可。小提琴 Bootstrap 的 p tag 的 margin-bottom 为 1rem; 将 mb-0 添加到 p 标签可能会解决您的问题。 <div class="container-fluid d-flex align-items-center justify-content-between" id="footer"> <p class="mb-0">Copyright 2019<span>©</span></p> <p class="mb-0">Back to Top</p> </div>

html css bootstrap-4 flexbox

回答 2 投票 0

为什么 jquery 动画会弄乱我在 boostrap 中的 nav flexbox 属性？

这是我关心的 HTML： ... 这是我关心的 HTML：  <ul class="nav sticky-top flex-row justify-content-center"> <li class="nav-item"> <a class="nav-link active text-white" href="#">About Me</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Skills</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Contact Me</a> </li> </ul> 我的屏幕显示下面的照片，根据我应用于导航的引导属性，我不应该获得该照片。那么为什么会发生这种情况呢？老实说，JS 小提琴并不像我的页面上那样显示堆叠的导航项。我不知道为什么。当我消除 Jquery 时，导航上的所有 Flexbox 属性都可以工作。这是为什么？ $(document).ready(function(){ $(".nav").delay(5500).slideDown(500); }); 我无法解决问题，但你可以逃走。 //CSS .nav { background-color: black; display: none; opacity:0; } //jquery $(document).ready(function(){ $(".nav").slideUp(); setTimeout(function(){ $(".nav").css('opacity',1).slideDown(); }, 1000); });

jquery html css bootstrap-4

回答 1 投票 0

已删除已删除

已删除已删除已删除已删除已删除

bootstrap-4

回答 3 投票 0

如何在JS中创建带有引导下拉菜单的shadowDOM

我正在创建一个 chrome 扩展，我需要将 bootstrap 提供的分割按钮添加为 ShadowDOM。但我找不到任何明确的文档。有人可以告诉我如何创建...

javascript css twitter-bootstrap bootstrap-4 shadow-dom

回答 1 投票 0

可以同时使用Tailwind css和Bootstrap 4吗？

我的项目目前是Vuejs，它使用BootstrapVue组件（似乎使用bootstrap 4 css）。我正在尝试将 Tailwind css 用于新的自定义组件。可以同时使用两者吗...

vue.js bootstrap-4 vue-component tailwind-css

回答 6 投票 0

如何使用 ``` 在我的 HTML 页面中显示为代码块？

我正在使用Python Django、Bootstrap 5，我的HTML代码在这里：我正在使用 Python Django、Bootstrap 5，我的 HTML 代码在这里： <div id="chat_hist" data-bs-spy="scroll" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0" > {% for chat in chat_history %} <p style="white-space: pre-line;"> {{chat.message | safe}} </p> {% endfor %} </div> 正文是： chat.message 有带反引号的代码，但它看起来不像代码。看起来就像普通文本。（我添加了一张图片以更好地解释。）正如我所说，chat.message 有代码块，但并不完全由代码组成。我不想在整条消息中使用 <pre> 或 <code>。我还想让我的代码着色。对于这种情况如何实现显示为代码块？您正在寻找一种在 HTML 文件中呈现 Markdown 的方法。考虑查看md-block。它为您提供了 md-block 标签，您可以使用它来渲染 markdown。一个例子是： <md-block> ```java public class Main { public static void main(String[] args) { System.out.println("Hello, world!"); } } ``` </md-block>

html bootstrap-4

回答 1 投票 0

如何将每个新帖子彼此相邻对齐？

我正在这个博客上工作，我希望每当用户发表新帖子时，它都会显示在其他帖子旁边而不是在它们下面，但我不知道我应该做什么，到目前为止我有这些卡片，但它们保留了

html css django bootstrap-4

回答 1 投票 0

PrimeNG 主题字体覆盖 Angular 应用程序字体

我正在尝试在带有 Nova Light 主题的角度应用程序上使用 PrimeNG。我添加了依赖项并将 theme.css 文件添加到 styles.scss 文件中，如下所示。问题来了，PrimeNG 主题结束了

angular bootstrap-4 primeng angular-components

回答 3 投票 0

BS 导航栏不适用于下载的 Bootstrap 库。 CDN 没问题，请帮助我

我正在尝试使用带有下载的库/离线的引导程序。然而，编写的 html 与 CDN 配合得很好。这是文件夹架构。 ...