twitter-bootstrap-3 相关问题

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

我正在使用 Bootstrap 3，我需要具有相同的列高度，并且列的内容能够垂直对齐垂直... 我正在使用 Bootstrap 3，我需要具有相同的列高度，并且列的内容能够垂直对齐 <div class="row"> <div class="col-xs-12 col-sm-3"> vertical align top </div> <div class="col-xs-12 col-sm-3"> vertical align middle </div> <div class="col-xs-6 col-sm-3"> <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> </div> <div class="col-xs-6 col-sm-3"> vertical align bottom </div> </div> 请查看此处https://jsfiddle.net/4d2m74nc/4/ 这是可以实现的，但会剥夺引导程序的一些内置功能。主要是网格系统移动渲染的媒体查询。实现这一目标的最佳方法可能是使用弹性盒方法。演示。 <div class="row row-eq-height"> <div class="col-sm-3"> vertical align top </div> <div class="col-sm-3 vcenter"> vertical align middle </div> <div class="col-sm-3"> <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> </div> <div class="col-sm-3 vbottom"> vertical align bottom </div> </div> CSS .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .vcenter{ display:flex; flex-direction:column; justify-content:center; } .vbottom{ display:flex; flex-direction:column; justify-content:flex-end; } 第二种方法是使用绝对定位进行垂直对齐，并使用弹性盒来匹配高度。查看演示。 <div class="row row-eq-height"> <div class="col-sm-3"> vertical align top </div> <div class="col-sm-3"> <div class="vcenter"> vertical align middle </div> </div> <div class="col-sm-3"> <img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> </div> <div class="col-sm-3"> vertical align bottom </div> </div> CSS .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .vcenter { position: absolute; top: 50%; } 另一种选择是使用 JavaScript 来为您修复高度和垂直对齐。您可以使用matchHeight.js。使用起来相当简单。您只需将要与另一个 <div> 高度匹配的所有列内容与类 .box 一起包装即可 <div class="row"> <div class="col-md-4"> <div class="box"> Content </div> </div> <div class="col-md-4"> <div class="box"> Content </div> </div> <div class="col-md-4"> <div class="box"> Content </div> </div> </div> 然后在 JavaScript 文件中的文档加载或 JQuery 链接后的 <script></script> 标记中实例化它。 $('.box').matchHeight(); 坚持使用 JavaScript 进行垂直对齐，您可以将 .vcenter 添加到您想要垂直对齐的 .box 元素，然后执行以下操作： var height = $('.vcenter').height(); $('.vcenter').css('margin-top', (height/2)); $('.vcenter').css('margin-bottom', -(height/2)); var $window = $(window); var windowsize = $window.width(); function checkWidth(){ if (windowsize < 440) { $('.vcenter').removeAttr("style"); } } $(window).resize(checkWidth); 计算 .box 的高度，然后除以 2 以确定内容的顶部和底部边距。然后我们确定窗口的宽度，并在调整大小时删除边距。这部分是未经测试的，但我相信理论上是可行的。这是 matchHeight.js 的 demo。这里有一个关于 Bootstrap 中列高匹配的有用博客。最后两种垂直对齐方法效果较差，但应该可行。 <div class="row flex-container"> <div class="col-xs-12 flex-item col-sm-3"> vertical align top </div> <div class="col-xs-12 flex-item col-sm-3"> vertical align middle </div> <img class="col-xs-6 flex-item col-sm-3" src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" /> <div class="col-xs-6 flex-item col-sm-3"> vertical align bottom </div> </div> 支持盒子的 CSS flex item 属性，它只是为了让您理解 .flex-container { display: -webkit-flex; display: flex; } .flex-item { border: 1px solid #000; padding: 20px; } 注意：我找到了一个有趣的解决方案，希望它对您有用，问候。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col d-flex justify-content-center align-items-stretch bg-primary"> <div class="align-self-center"> <h1>Hello!</h1> </div> </div> <div class="col d-flex justify-content-center align-items-stretch bg-primary-subtle"> <div class="align-self-center"> <h1>Hello!</h1> <h1>Hello!</h1> </div> </div> <div class="col d-flex justify-content-center align-items-stretch bg-secondary"> <div class="align-self-center"> <h1>Hello!</h1> <h1>Hello!</h1> <h1>Hello!</h1> </div> </div> </div> </div>

css twitter-bootstrap-3

回答 3 投票 0

如何在 bootstrap 移动版中隐藏网格中的一列

我觉得我想在 bootstrap 移动版本中隐藏网格中的一列有点棘手。让我们举个例子我想在 bootstrap 移动版中隐藏网格中的一列有点棘手。让我们举个例子 <div class="row"> <div class="col-xs-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div> </div> 在编码之上，我在移动设备查看时隐藏了图像部分。我想要的是我不想要图像部分的间距，即使它被隐藏为增加左侧部分以到达右侧。自 Bootstrap V4 以来，hidden-X 类已被删除。为了根据列宽隐藏列，请使用d-none d-X-block。基本上，您只需关闭要隐藏的尺寸的显示，然后设置更大尺寸的显示即可。对所有人隐藏 .d-none 隐藏在 xs .d-none .d-sm-block 隐藏在 sm .d-sm-none .d-md-block 隐藏在 md .d-md-none .d-lg-block 隐藏在 lg .d-lg-none .d-xl-block 隐藏在 xl .d-xl-none 取自这个答案. 因为您隐藏了“xs”中的第二列，您可以通过将类“col-xs-12”定义为 column1 来使用第一列的全宽。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div> </div> 如果您使用的是 bootstrap 4，和/或想要隐藏除超小视图以外的任何列，方法如下： Bootstrap 3： <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs"> </div> </div> 换句话说，您必须定义要隐藏列的每个单独的预定义视口大小。 Bootstrap 4：（少一点冗余） <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg-down"> </div> </div> 另外，如果你想在屏幕太大时隐藏一列： <div class="row"> <div class="col-md-12 col-sm-9"> </div> <div class="col-sm-3 hidden-md-up"> </div> </div> 还请注意，col-xs-[n] 在 bootstrap 4 中已被 col-[n] 替换你必须使用的是媒体查询。举个例子： @media (min-width: 1000px) { #newDiv { background-color: blue; } .col-xs-3 { display: block; } } @media (max-width: 999px) { #newDiv { background-color: red; width: 100%; padding-right: 50px; margin-right: 0px; } .col-xs-3 { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="newDiv" class="col-xs-9"><p>Hello World!</p></div> <div class="col-xs-3"><p>Hello to you to</p></div> 全屏查看屏幕响应在 Bootstrap 5 中，我们使用显示实用程序 (https://getbootstrap.com/docs/5.3/utilities/display/)。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image d-none d-sm-block"> <img src="https://placehold.co/100x100/"> </div> </div>

css twitter-bootstrap twitter-bootstrap-3

回答 5 投票 0

Bootstrap 下拉子菜单丢失

Bootstrap 3 仍在 RC，但我只是想实现它。我不知道如何放置子菜单类。即使 css 中没有类，甚至新文档也没有说明任何内容......

css twitter-bootstrap twitter-bootstrap-3 submenu bootstrap-5

回答 11 投票 0

我可以在 Twitter Bootstrap 的工具提示中使用复杂的 HTML 吗？

如果我查看官方文档，我可以看到一个名为 HTML 的属性：名称 |类型 |默认 |描述 ---------------------------------------------- ----------------------...

javascript html twitter-bootstrap-3 tooltip

回答 8 投票 0

如何根据屏幕尺寸更改背景图像，可能使用 Bootstrap

我有一个 background-image:url 在我的 CSS 中。问题是当我过渡到屏幕变为纵向的移动设备时。我有一个不同的肖像导向背景...

css twitter-bootstrap twitter-bootstrap-3

回答 4 投票 0

需要在 HTML 和 CSS 中重构的 UI 设计

我希望下拉菜单设计看起来像 [Mega Menu Dropdown]，但设计变得像 [Dropdown]。我的 CSS 很差，我需要你的帮助。我正在使用 Bootstrap v3.4.1。下面的脚本...

html css asp.net twitter-bootstrap-3 visual-studio-2022

回答 0 投票 0

引导行中的水平可滚动 div

我正在尝试制作一个水平可滚动的引导程序行。该行包含包装在 div 中的客户评论。每个推荐div的宽度为33.333%。空白：nowrap 和显示：内联...

html css list twitter-bootstrap-3 scrollable

回答 8 投票 0

Bootstrap navbar x-scroll

我正在尝试更改 Bootstrap 导航栏的行为以继承水平滚动而不是折叠，它适用于移动设备，但我希望它在所有设备上都相同......使用 SASS： .

css twitter-bootstrap twitter-bootstrap-3

回答 4 投票 0

如何在移动视图中隐藏表格中的某些列？

此链接适用于桌面视图桌面视图。如果用于移动视图，则此链接。移动视图。如何使移动视图中的这些列看起来像桌面视图中的列。这是我的

css twitter-bootstrap mobile twitter-bootstrap-3

回答 2 投票 0

Bootstrap Popover - 如何在文本弹出窗口中添加链接？

我使用 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：...