twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

我使用 bootstrap 3 popover。现在我想要文本 popvover 上的链接。代码：我使用 bootstrap 3 popover. 现在我想要文本 popvover 上的链接。代码： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href="" title="test add link">link on content</a>" data-original-title="test title" > test link </a> 但是当我在 html 中开始代码时，我看到： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href=" "="">link on content</a> " data-original-title="test title" > test link 我知道符号中的问题"但我不知道在链接中添加链接... 请告诉我如何编写正确的代码？附言：如果问题已经存在，请给我链接。您需要在初始化弹出窗口时传递具有值html的true选项，如下所示。演示 JS： $("[data-toggle=popover]") .popover({html:true}) HTML： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title" target="_blank" > test link </a> 只需使用属性data-html="true". <button data-toggle="popover" data-content="Link: <a href='xyz.com'>XYZ</a>" data-html="true"> CLICK </button> 我使用了 data-trigger="focus" 并且弹出窗口内容中的链接有问题。如果在链接上单击鼠标按钮并按住一段时间，则弹出窗口会消失并且链接“不起作用”。一些客户对此表示抱怨。 HTML <a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="focus" title="" data-content="test content <a href='/' title='test add link'>link on content</a>" data-original-title="test title">test link</a> JS $("[data-toggle=popover]").popover({html:true}) 您可以在这里重现问题. 我使用以下代码来解决问题： data-trigger="manual" 在 html 和 $("[data-toggle=popover]") .popover({ html: true}) .on("focus", function () { $(this).popover("show"); }).on("focusout", function () { var _this = this; if (!$(".popover:hover").length) { $(this).popover("hide"); } else { $('.popover').mouseleave(function() { $(_this).popover("hide"); $(this).off('mouseleave'); }); } }); 如果你想使用焦点 and 弹出窗口内的链接，你需要防止弹出窗口在点击内部时关闭。我找到的最干净的解决方案是在具有preventDefault类的Popup中.popover点击 $('body') .on('mousedown', '.popover', function(e) { e.preventDefault() }); }); <a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a> 只需添加 data-html="true" 即可使用链接属性 :) 值得注意的是，虽然给出的答案是正确的 - 当应用 data-trigger="focus" 时，链接会导致问题。正如我从客户发现如果在弹出窗口上快速发生单击，链接将被操作，如果用户按住他们的鼠标按钮然后不幸的是触发器启动并出现弹出窗口。因此，简而言之，请考虑是否需要链接并计划点击次数。 $("body").on("mousedown",".my-popover-content a",function(e){ document.location = e.target.href; }); 对我有用：基本上，把事情掌握在自己手中。同样，这是带有弹出选项 html: true、sanitize: false 和 trigger : "focus"

html hyperlink twitter-bootstrap-3 popover

回答 7 投票 0

文本链接上的 Bootstrap3 图标对齐

请看我写的这个例子，这是我的代码的基本结构： Note2: blah blah blah 请看我写的这个例子，这里是我的代码的基本结构： <a class="st-list-item" href="blah">Note2: blah blah blah <span class="glyphicon glyphicon-chevron-right st-gray pull-right"></span> </a> 当我缩小屏幕宽度时，>图标出现在第二行：如何让 > 图标始终与 a 标签的中间垂直对齐？我不一定要使用 a 标签，但它是一个链接，应该可以点击。 You should add this css to your .st-list-item: position:relative; 并将此类也添加到您的 css 中： .glyphicon{ position:absolute; right:0; top:40%; } 您可以使用媒体查询为每个屏幕宽度范围指定顶部测量值，因此它将始终垂直居中。小提琴

html css twitter-bootstrap-3

回答 1 投票 0

如何使用 bootsnip 表单生成器？

我需要找到 bootsnipp 表单生成器的完整源代码链接演示：https://bootsnipp.com/forms?version=3 我试图在 github 和平台本身上搜索但没有结果。

twitter-bootstrap-3 bootstrap-5

回答 0 投票 0

如何在 Bootstrap 5 的轮播中显示上一张和下一张图片的预览

我希望轮播中的上一张和下一张图像对于每个中心图像都部分显示，例如这这是代码。我希望轮播中的上一张和下一张图像对于每个中心图像都部分显示，例如这个这是代码。 <div class="carousel-container"> <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true"> <div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> </div> <div class="carousel-item active"> <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100 carousel-img-one" alt="fitness"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100 img-fluid" alt="art"> </div> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> .carousel-container { margin: auto; width: 50%; } .carousel-control-prev, .carousel-control-next { margin: -150px !important; } 谢谢这是 Bootstrap 5 的代码片段： codepen 示例你可以在https://jsfiddle.net/q9ewyd1L/9/上看到直播 <div class="carousel-container"> <div id="carouselExample" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100" alt="fitness"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100" alt="art"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> .carousel-container { margin: auto; width: 80%; } .carousel-item { position: relative; } .carousel-item.active img { width: 100%; } .carousel-item:not(.active) img { width: 80%; position: absolute; top: 0; left: 10%; opacity: 0.5; transition: all 0.3s ease; } .carousel-item:not(.active) img:hover { width: 90%; left: 5%; opacity: 0.8; cursor: pointer; }

html css twitter-bootstrap-3 carousel bootstrap-5

回答 2 投票 0

最后一列不应该打开可折叠的表格

我正在尝试从表行的最后一个 td 中删除表行类的点击效果，它有一个动作，并尝试使用 jQuery 来完成。这是我的桌子：你可以看到当我点击一个 td

jquery web twitter-bootstrap-3 frontend frameworks

回答 1 投票 0

如何在 Bootstrap 5 的轮播中显示上一张和下一张图片的部分预览

html css twitter-bootstrap-3 carousel bootstrap-5

回答 0 投票 0

div 与 ajax 调用重叠

在 ajax 调用中，使用引导程序在我的 html 中声明的一个 div 消失了。第一次加载图表时，下拉输入字段会消失。这是我使用引导程序代码的 html。注意，...

javascript jquery twitter-bootstrap-3 google-visualization

回答 0 投票 0

如何在 bootstrap-toggle 中更改文本的字体大小

这几乎就是问题所在。我有一个引导切换按钮。我想增加文本的大小（data-on 属性和 data-off 属性）这几乎就是问题所在。我有一个引导切换按钮。我想增加文本的大小（data-on 属性和 data-off 属性） <input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info" data-offstyle="info" data-on="increaseSize" data-off="increaseSize" data-width="500" data-height="200" data-size="large"> 这是手机上的样子。 @Rockstar5645 只需使用 CSS： .toggle.android .toggle-group label { font-size: 20px; } html（已发布，没有变化）： <input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info" data-offstyle="info" data-on="increaseSize" data-off="increaseSize" data-width="500" data-height="200" data-size="large"> 在 Bootstrap 4 中： <input type="checkbox" data-toggle="toggle" data-onstyle="info" data-offstyle="outline-secondary" data-on="on" data-off="off" > .toggle, .toggle-on, .toggle-off{ font-size: 13px; // set font-size for on-off state } .toggle.btn{ height:30px !important; // set height for btn }

css twitter-bootstrap-3

回答 2 投票 0

bootstrap 3 下拉和下拉按钮冲突

我在一个页面上有几个下拉按钮。以及导航栏中包含的下拉菜单。当您单击按钮或下拉菜单时，它会起作用并显示下拉菜单。当你点击外面...

jquery asp.net-mvc twitter-bootstrap-3

回答 0 投票 0

Popover 的箭头显示轮廓（Bootstrap 3）

使用 Bootstrap 3.2.0。（还有 Bootswatch Default，但在我的测试中，这种情况也在没有 Bootswatch 的情况下发生。）我在弹出窗口和弹出窗口的箭头之间看到一个轮廓：我试过只是移动...

twitter-bootstrap-3 bootswatch

回答 0 投票 0

Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs（小于 sm）

我浪费了很多时间寻找一种方法来为输入和输入组制作我自己的 xs 大小（小于 small），所以这是代码！ Peter Butkovic 将错误/请求上传到引导程序 github：...