twitter-bootstrap 相关问题

Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

如何使用bootstrap消除额外的html正文高度

我正在使用引导程序，并在我的身体末端得到大量的“空白”。 Bootstrap 似乎是手动设置我的 html 正文的高度，我无法覆盖它。有没有人...

html twitter-bootstrap height whitespace extra

回答 2 投票 0

摆脱页脚下方的空白

我使用的是bootstrap 3.0框架，无论我做什么，我都无法让页脚后的小空白消失。它只在Chrome中显示，在IE中没问题。我使用了最小高度，

html css twitter-bootstrap

回答 5 投票 0

如何在Bootstrap 4中将不同尺寸的图像放入轮播中？

我在 Bootstrap 4 中将不同尺寸的图像放入轮播中时遇到问题。如何将不同尺寸的图像放入此轮播中。例如，我想放置不同大小的

twitter-bootstrap bootstrap-4

回答 1 投票 0

如何在Bootstrap 4中将不同尺寸的图像放入轮播中？

我在 Bootstrap 4 中将不同尺寸的图像放入轮播中时遇到问题。如何将不同尺寸的图像放入此轮播中。例如，我想放置不同大小的

twitter-bootstrap bootstrap-4

回答 1 投票 0

带有 HTML 内容的 Bootstrap 4 弹出框

这是我的代码，但它不起作用。当我使用内容中包含 HTML 的本机 Bootstrap PopOver 时，前端不会显示 PopOver 并且 HTML 源格式错误。这是我的代码，但它不起作用。当我使用内容中包含 HTML 的本机 Bootstrap PopOver 时，前端不会显示该 PopOver 并且 HTML 源格式错误。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <style> .popover{ color: #757575 !important; } </style> </head> <body> <div class="container"> <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span> </div> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> 删除类属性。它可以工作。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <style> .popover{ color: #757575 !important; } </style> </head> <body> <div class="container"> <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span> </div> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> 我试图在引导弹出窗口中显示 HTML，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果我做错了什么，请告诉我。请记住在弹出框元素上设置 data-html="true"（以及其他 data- 属性）。否则 HTML 内容将无法正确呈现。更多详细信息可以在 Bootstrap 文档中找到：https://getbootstrap.com/docs/4.6/components/popovers/#options 只需将 popover 类用单引号括起来即可。 <div class='popover'>text text</div> 而不是 <div class="popover">text text</div> $element.popover({ animation: false, html: true, sanitize: false, placement: 'bottom', trigger: 'manual', content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>', }); 您可以像这样使用它，而不是向所有弹出窗口添加 data-html="true"： $('[data-toggle="popover"]').popover({html:true});

javascript jquery html twitter-bootstrap bootstrap-4

回答 4 投票 0

如何在第一个周期停止引导轮播

我希望滑块开始滑动，并且它应该在幻灯片/轮播的第一张图像上的第一个周期停止。 var imgCount = 3; $('#myCarousel').carousel({ 间隔：2500 }); $('#myCarousel').bind(...

javascript jquery twitter-bootstrap

回答 1 投票 0

通过 Bootstrap4 对列进行排序

我有 3 列，我想在桌面和移动设备上以不同的方式订购。目前，我的网格如下所示： 1 我有 3 列，我想在桌面和移动设备上以不同的方式订购。目前，我的网格如下所示： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 在移动视图中我希望有以下输出： 1-3-2 不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题。 2021 - Bootstrap 5 响应式订购类现在为 order-first、order-last 和 order-0 - order-5 演示 2018 - Bootstrap 4 响应式订购课程现在为order-first、order-last和order-0 - order-12 Bootstrap 4 **push** **pull** 类现在为 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}`，并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局，请执行以下操作：[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmebUp)（这只适用于 4.0 beta 之前的版本）引导程序4.1+ 由于 Bootstrap 4 是 Flexbox，因此很容易更改列的顺序。列可以从 order-1 到 order-12 进行排序，例如相对于父级 order-md-12 order-2 的 md（最后一个在 xs，第二个在 .row）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div> 演示：使用order-*类更改顺序桌面（较大屏幕）：移动设备（较小的屏幕）：还可以使用 flexbox 方向实用程序... 更改列顺序 <div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div> 演示：Bootstrap 4.1 使用 Flexbox 方向更改顺序旧版本演示演示 - 阿尔法 6 演示 - 测试版 (3) 查看更多 Bootstrap 4.1+ 订购演示相关 Bootstrap 4 中使用推/拉和 col-md-12 的列排序 Bootstrap 4 更改列的顺序 A-C-B A-B-C 这也可以通过 CSS“Order”属性和媒体查询来实现。类似这样的： @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } CodePen 链接：https://codepen.io/preston206/pen/EwrXqm 即使这样也行： <div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div> 我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来实现 Bootstrap 4，但这个 css 应该适合你： .pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } } ...并将类添加到第二列： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 编辑：哦...看起来我上面写的正是 Bootstrap 4 中的 .pull-xs-right 类：X 只需将其添加到第二列，它应该可以完美工作。将此类用于第一列第二个：第三：由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您将需要使用以下内容（如 codeply 4 Flexbox 顺序演示 - 提供的 alpha/beta 链接中所示）在答案中）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div> 但请注意，“Flexbox order demo - beta”进入了 alpha 代码库，并将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中 - 但这看起来像是一个 codeply 问题，因为切割并将代码粘贴到 codeply 之外的工作方式如上所述。您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上

css twitter-bootstrap bootstrap-4 grid

回答 7 投票 0

有没有办法在 Github Wiki 上显示进度条？

我想在 Github Wiki 上展示我的项目当前迭代的进度。但是我找不到办法做到这一点。我正在寻找类似于 Bootstrap 进度条的东西......

twitter-bootstrap github github-flavored-markdown

回答 2 投票 0

如何添加基于文本的单位，例如浮动到输入元素内部（或外部）的“lbs”？

是否可以在输入元素内插入单位？首选在元素内部，但在外部也可以接受。

html css twitter-bootstrap

回答 10 投票 0

无法自定义引导滑块图标

我希望用自定义图像或图标替换 Bootstrap 滑块中的默认图标（通常是箭头或 V 形）。我尝试过直接更新 Bootstrap 类。轮播控制上一个图标...

html css twitter-bootstrap

回答 1 投票 0

引导多选获取选定值

如何返回 onChange 多选下拉列表中的所有选定值。这里使用了插件。尝试使用以下内容，但我认为我走错了路 $('#multiselect1').multiselect({ ...

jquery twitter-bootstrap multi-select

回答 8 投票 0

Twitter Bootstrap：进度条上的居中文本

我一直在使用 Twitter 的 bootstrap，我希望进度条上的文本能够在 on bar 上居中，无论其值如何。下面的链接是我现在拥有的。我希望所有文字都是

css twitter-bootstrap progress-bar centering

回答 3 投票 0

在较小的屏幕上查看网站时，Bootstrap 5 轮播标题文本会消失

我正在使用引导轮播代码。我的轮播文本在常规尺寸上看起来不错，但在较小尺寸的屏幕上看到时它就消失了。看起来文字已经隐藏在图像后面了。 ...

html css twitter-bootstrap bootstrap-4 bootstrap-5

回答 2 投票 0

更改引导模式窗口中关闭按钮的颜色

我正在使用带 boostrap 的模态窗口。我已经更改了背景和字体颜色，但我没有成功将右上角的关闭按钮更改为白色。我正在使用带有 boostrap 的模态窗口。我已经更改了背景和字体颜色，但我没有成功将右上角的关闭按钮更改为白色。 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="modal_button">×</span><span class="sr-only">Close</span></button> 这是我的 css 属性 .modal-header { border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; text-align: left; font-size: 23px; color: white; background-color: #261f31; border-bottom: 0px; } 我想将 X 按钮变成白色 Bootstrap 设置颜色是这样的： .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2; } 所以你可以用这个覆盖它： .close { color: #fff; opacity: 1; } 在 bootstrap 5 中，他们有一个类，允许您将关闭按钮的颜色更改为白色。 <button type="button" class="btn-close btn-close-white" aria-label="Close"></button> Bootstrap 5.3 更新从 v5.3.0 开始，.btn-close-white 类已弃用。相反，请使用 data-bs-theme="dark" 更改关闭按钮的颜色模式。 <div data-bs-theme="dark"> <button type="button" class="btn-close" aria-label="Close"></button> <button type="button" class="btn-close" disabled aria-label="Close"></button> </div> 来源只需写下代码 filter: brightness(0) invert(1); 您可以覆盖模态弹出窗口中的默认 x 按钮的简单方法 button.close { background: #d73e4d; background: rgba(215, 62, 77, 0.75); border: 0 none !important; color: #fff7cc; display: inline-block; float: right; font-size: 34px; height: 40px; line-height: 1; margin: 0px 1px; opacity: 1; text-align: center; text-shadow: none; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; vertical-align: top; width: 46px; } 对于 Bootstrap 5，您需要添加 btn-close-white 类

css twitter-bootstrap

回答 5 投票 0

如何调整输入组插件的大小

嗨，我有一些输入选项，如下所示，我试图使所有选项具有相同的宽度。我尝试通过外部 css 继承默认样式：。添加在 { 宽度：50%；背景-

html css twitter-bootstrap

回答 2 投票 0

Bootstrap：反转列使它们堆叠

我试图让“第二”和“第三”列彼此相邻，同时还反转 MD 断点的顺序我试图让“第二”和“第三”列彼此相邻，同时还反转它们的 MD 断点顺序 <body> <div class="row flex-md-column-reverse"> <aside class="col-6"> <div class="border-top"> <h1>Third</h1> </div> </aside> <div class="col-6"><h1>Second</h1></div> <section class="col-12"> <h1>First</h1> </section> </div> </body> 我应用了flex-md-column-reverse，但它使它们彼此堆叠你可以玩玩order: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <aside class="col-6 order-md-3"> <div class="border-top"> <h1>Third</h1> </div> </aside> <div class="col-6 order-md-2"><h1>Second</h1></div> <section class="col-12"> <h1>First</h1> </section> </div>

html css twitter-bootstrap flexbox

回答 1 投票 0

如何使用 flex 让一个 div 向左对齐跨越所有高度，两个 div 在背景 div 内向右对齐顶部和底部？

所以我有 4 个 div，其中一个是充当“背景”div 的父级，以及该 div 内的其他 3 个 div。我想将较大的一个向左对齐并使其跨越整个高度...

css twitter-bootstrap flexbox

回答 1 投票 0

如何让我的 Bootstrap 网格填充页面的剩余高度而不超出它？

所以我有一个 Bootstrap 标头，这是他们示例中的标头之一。在其下方，我有一个包含 3 列的网格容器。我希望该网格填充 h 之后剩余的页面高度...

css twitter-bootstrap flexbox

回答 1 投票 0

引导复选框无法正常工作

我正在使用以下标记和样式（Bootstrap）。它显示了我的复选框，但它处于瘫痪状态，即无法选中。这是我的标记：我想要更多 Bootstrap 风格的东西。我知道那里...