twitter-bootstrap-3 相关问题

将 CSS3 过渡效果应用于 Bootstrap 元素

我有一个使用 Bootstrap 排列的元素网格（这里是 jsFiddle）： 我有一个使用 Bootstrap 排列的元素网格（jsFiddle ）： <div class="container"> <div class="row"> <div class="col-xs-3"> <div class="content-block"><p>1</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>2</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>3</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>4</p></div> </div> </div> </div> 我有一个 onclick 事件，可以删除单击的元素： $('.col-xs-3').click(function(){ $(this).remove(); }); 这个效果很好。但效果相当不和谐 - 请参阅fiddle。我想对每个 col-xs-3 应用 CSS3 过渡效果，这样当删除一个元素时，其余元素将使用过渡来移动并填充已删除元素的空间，而不仅仅是跳跃。 我添加了以下CSS，但没有效果： .col-xs-3{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 我怎样才能实现这个目标？ JayMee 是对的，处理这个问题的正确方法是在删除的元素中转换属性。这将使其余元素顺利改变位置。 我们可以让元素立即消失（不设置不透明度的过渡），然后减小宽度 jQuery(function(){ $('.col-xs-3').click(function(){ $(this).css({"opacity": "0", "width": "0px", "padding": "0px"}); }); }); .col-xs-3{ -webkit-transition: all 1s ease-in-out; transition: width 1s ease-in-out; } .content-block{ width:90%; height:50px; margin:10px auto; background:pink; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-3"> <div class="content-block"><p>1</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>2</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>3</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>4</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>5</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>6</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>7</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>8</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>9</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>10</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>11</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>12</p></div> </div> </div> </div> jQuery(function(){ $('.col-xs-3').click(function(){ $(this).css({"opacity": "0", "width": "0px", "padding": "0px"}); }); }); .col-xs-3{ -webkit-transition: all 1s ease-in-out; transition: width 1s ease-in-out; } .content-block{ width:90%; height:50px; margin:10px auto; background:pink; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-3"> <div class="content-block"><p>1</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>2</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>3</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>4</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>5</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>6</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>7</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>8</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>9</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>10</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>11</p></div> </div> <div class="col-xs-3"> <div class="content-block"><p>12</p></div> </div> </div> </div>

引导程序和字段集

我讨厌引导程序使字段集标签和图例无效。 问：有没有办法告诉浏览器使用默认的字段集和图例渲染，而无需下载 bootst 的本地副本...

如何将 Affix 添加到 Bootstrap 固定底部导航栏

我知道我们可以向 Bootstrap 中的所有类型的常规导航栏添加附加实用程序。然而，就我而言，我需要将词缀添加到专门的导航栏固定底部导航栏。 @import url("https://m...

浏览器全屏时的引导模式问题

我有一个 div，我在浏览器中全屏预览它（requestFullScreen()）。 一切正常，但当我打开引导模式时，它显示在全屏 div 下（我的意思是全屏停留在...

使用bootstrapvalidator进行多步骤注册-防止错误继续进行

我有一个多步骤注册表表单，其中每个步骤都在字段集中，我正在使用引导验证器进行验证。我在第一步中创建了“下一步”按钮来切换验证。而且效果很好...... 问题我

从 url 中删除#id（引导程序）

我刚刚在我的网站上创建了引导导航栏，但我的网址遇到了问题...... 例如我有这样的东西： 我刚刚在我的网站上创建了引导导航栏，但我的网址遇到了问题...... 例如我有这样的东西： <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a data-toggle="collapse" data-target=".navbar-collapse" href="#about"> About </a> </li> </ul> </div> 我的网站网址如下所示：“something.html#about” 我想从网址中删除#about。我读到我应该删除？来自此 li 项目的 href，并将 #about 放入 data-target 但它对我不起作用。解决这个问题最简单的方法是什么？感谢您的任何回复。 您可以使用 data-target 代替 href。它将帮助您从浏览器 URL 中删除 #about。 所以代替 href="#about" 使用 data-target="#about" 我假设您是 HTML 以及网页如何工作的初学者。 HTML 元素 a(nchor) 的 href 属性定义超链接。 “#something”指向 HTML 网页中的 ID。它可以通过特定页面上的 JavaScript 访问。 在这种情况下，您的 href 指向当前页面，因为没有引用其他页面（该 href 没有像 href="otherPage.html#about" 这样的内容）。 引导框架可能需要它。这并没有什么问题。拥抱它，它是互联网的一部分，也是浏览器工作方式的一部分。 Também gostaria de sabre 解析器 isso。 Pois comecei trabalhar com Bootstrap e vi que na URL semper vem assim: (www.exemplo.com.br/#exemplo).. ao invés de (www.exemplo.com.br/exemplo)。 Gostaria de deixar dessa segunda forma.

禁用 Bootstrap 中的链接

第一个示例不起作用。我需要始终有一个列表来禁用链接？或者我的第一个演示有什么问题？ 链接已失效 第一个例子不起作用。我需要始终有一个列表来禁用链接？或者我的第一个演示有什么问题？ <a class="disabled" href="#">Disabled link</a> <ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... </ul> https://jsfiddle.net/7y0u2amy/ 我认为你需要 btn 课程。 会是这样的： <a class="btn disabled" href="#">Disabled link</a> Bootstrap 似乎不支持禁用链接。您可以自己添加一个类并向其添加一些样式，而不是尝试添加 Bootstrap 类，就像这样： a.disabled { /* Make the disabled links grayish*/ color: gray; /* And disable the pointer events */ pointer-events: none; } <!-- Make the disabled links unfocusable as well --> <a href="#" class="disabled" tabindex="-1">Link to disable</a><br/> <a href="#">Non-disabled Link</a> 我刚刚使用 CSS 创建了自己的版本。因为我需要禁用，然后当文档准备好时使用 jQuery 激活。这样，在文档准备好之前，用户无法单击按钮。所以我可以用 AJAX 代替。我想出的方法是向锚标记本身添加一个类，并在文档准备好时删除该类。可以根据您的需要重新调整它的用途。 CSS： a.disabled{ pointer-events: none; cursor: default; } HTML： <a class="btn btn-info disabled">Link Text</a> JS： $(function(){ $('a.disabled').on('click',function(event){ event.preventDefault(); }).removeClass('disabled'); }); 如果您想要禁用链接，则没有选项可以执行此操作。我想你可以在这里找到适合你这个问题的答案。 这里的一个选择是使用 <a href="/" onclick="return false;">123n</a> 禁用href标签 您不能仅将链接设置为“禁用”输入、文本字段等系统元素。 但是您可以使用 jQuery/JavaScript 禁用链接 $('.disabled').click(function(e){ e.preventDefault(); }); 只要将上面的代码包装在您想要禁用链接的任何事件中即可。 使用 class="pe-none"。 找到引导程序链接这里。 <a class="btn btn-outline-primary pe-none" target="_blank" href="#" role="button">Open</a> 我刚刚从我想要禁用的锚标记中删除了“href”属性 $('#idOfAnchorTag').removeAttr('href'); $('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled'); 感谢@jacob-van-lingen的评论，您可以在您的全局样式中扩展.btn-link a.disabled{ @extend .btn-link } 我开发了以下解决方案，因为当我将 Bootstrap 5 提供的 btn disabled 等类样式应用于卡片内的 <a> 元素时，边距和填充将应用于该元素： .disabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } <a href="#" class="disabled">Disabled Link</a> 我喜欢 Sercan 的答案，我在其中添加了一个小 jQuery，这样点击时链接也不会被跟随： $(document) .on("click", "a.disabled", function () { return false; }); 从上面的答案来看： .disabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } 更改为然后就可以禁用它了。 html： 文字 js： $("#myId").prop("已禁用",true);

如何将“品牌”文本/徽标向右移动/偏移（并将末尾的文本向左偏移）

好吧，我开始探索 Bootstrap，并在此过程中构建了页面顶部的基本导航栏。但是，当我按照 bootstrap 在其页面上提供的演示代码进行操作时，...

打开模态框的第二个按钮在第一次单击时没有响应并且无法正确关闭

我正在开发一个项目，用户需要使用签名板签署表单。该表单需要三个单独的签名，我已经实现了三个按钮来打开签名板的模式。

引导轮播可切换/动态选项卡

我尝试在每个选项卡中创建一个图片库（主页、菜单1、菜单2、菜单3），在第一个选项卡中它可以工作，但在另一个选项卡（菜单1）中它不能工作。它启动图库但无法使用选择器切换...

图像在 Bootstrap 3 中没有响应

我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？ 我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？ <!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!--My Style --> <link rel="stylesheet" href="css/Style.css"> </head> <body> <div class="container"> <div class="rainbow"> <img src="img/header.png" alt="DayCare" /> </div> </div> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 我在 Bootstrap 2.3 上进行了测试，运行良好。 将 'img-responsive` 类添加到 img... <img src="img/header.png" class="img-responsive" alt="DayCare" /> 您可以像这样轻松完成： <img src="img/header.png" style="width:100%; height:auto; display:block;" /> 如果标题图片的宽度小于屏幕宽度，则应在样式中添加 max-width，以在大视图中保持标题的原始宽度。例如，假设 header 的原始宽度是 600px，img 应该是这样的： <img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" /> 同意 Skelly 的观点，img 响应式效果很好。 我尝试使用此代码（删除 Style.css），工作正常。 <!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> </head> <body> <div class="container"> <div class="rainbow"> <img class="img-responsive" src="bootstrap/resources/img/charpente/toulenne/IMGP0110.JPG" alt="DayCare" /> </div> </div> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 尝试删除 Style.css

引导多选不起作用

我正在尝试使用多选Bootstrap，我使用了以下代码，该代码也可以在他们的网站（http://davidstutz.github.io/bootstrap-multiselect/）中找到，它显示了多选按钮

ASP 服务器标记未呈现

我正在使用引导程序来折叠和展开策略的详细信息视图。我有下面的代码，我的服务器标签未解析为客户端 ID，并在 htm 中保持为 <%= details.ClientID %>...

如何使我的下拉菜单可滚动

目前我有一个下拉菜单，当用户将鼠标悬停在它上面时会弹出。下拉菜单当前显示 8 个链接。我想放置 21 个链接，但这会占据整个屏幕。怎么办...

引导程序溢出未正确对齐

我正在制作一个页面，在小屏幕（即手机）上我希望图像位于文本上方，而在较大屏幕上我希望图像位于文本右侧。 我正在使用 offset 来拉动 im...

在react-bootstrap中更改NavDropdown的颜色和背景颜色

在react-bootstrap中使用我的NavDropdown，我无法设置其颜色或背景颜色的样式...... 使用 NavDropdown 中的 react-bootstrap，我无法设置其颜色或背景颜色的样式... <NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" > <LinkContainer to="/about"> <MenuItem eventKey={3.1} className="text-center">About</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/products"> <MenuItem eventKey={3.2} className="text-center">Products</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/blog-index"> <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem> </LinkContainer> </NavDropdown> 我可以使用 style={{ fontSize: '130%' }} 更改字体大小，但我还想使用 .. 更改颜色和背景颜色 style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }} ...但是 color 和 backgroundColor 在括号内不起作用。 我尝试做的一件事是将 <NavDropdown> 元素包装在样式 div 中，但这搞乱了导航栏元素的对齐方式。 还可以提供标题文本作为 JSX 元素。 <NavDropdown title={ <span className="text-primary my-auto">Dropdown</span> } id="nav-dropdown" > <NavDropdown.Item>Action</NavDropdown.Item> <NavDropdown.Item>Another action</NavDropdown.Item> </NavDropdown> 并且不需要编写自定义 CSS，这可能是我们想要避免的。 设置 NavDropdown 的 id 并为此 id 创建 css 样式。 反应中： <NavDropdown title={"Example"} id="nav-dropdown"> 在 CSS 中： #nav-dropdown{ color: white; font-weight: bold; background-color: red; } 使用 Chrome 中的检查元素工具检查后。我通过在我的index.html中添加以下几行来使其工作' div.dropdown-menu.show { background-color: #000000; // for drop down menu color } a.dropdown-item { color: #ffffff; // for font color of individual drop down item } ` 对于您选择的选择器。您提供的代码结构中不存在这一点。您是如何想出选择器的？

缩小整个引导页面

当我在 Chrome 中缩小到 80% 时，我的引导页面看起来不错。 有没有办法修改css来缩小整个网站？

引导程序对齐按钮旁边的文本框的问题

我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的HTML（我是引导程序的新手） 我正在尝试构建我在图像中附加的内容，但不幸的是我无法让它正确放置，到目前为止这是我的 HTML（我是引导程序的新手） <div class="row"> <div class="container"> <div class="col-lg-3"> </div> <div class="col-lg-6"> <p class="text-center"> <strong>Enter your email and get special information</strong> </p> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline col-lg-12" })) { <div class="input-group col-lg-9" style="margin-left: 3%"> <input type="text" class="form-control"> </div> <div class="input-group col-lg-2"> <button class="btn btn-primary">Submit</button> </div> } </div> <div class="col-lg-3"> </div> </div> </div> 本来应该是这样的 但看起来像这样，理想情况下我希望按钮离文本框更近一点 但是当我在移动屏幕上查看它时，我遇到了混乱 如有任何帮助，我们将不胜感激。 这个小提琴怎么样： http://jsfiddle.net/jwyr6Lwh/1/ .custom input.form-control { border: 1px solid #848484; -webkit-border-radius: 30px !important; -moz-border-radius: 30px !important; border-radius: 30px !important; -moz-box-shadow: 2px 2px 1px #666; -webkit-box-shadow: 2px 2px 1px #666; box-shadow: 2px 2px 1px #666; outline:0; padding-left:10px; padding-right:0px; background-color: rgba(255,255,255,0.2); } .custom button { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 在移动浏览器上显示不同的原因是它的响应能力 class="col-lg-2" 意味着在大型设备上它将显示在两列中，否则一列在另一列下面。如果您不打算这样做，请采取class="col-sg-2"。 这个怎么样？ http://jsfiddle.net/ytn7z6tc/4/ <h3 id="btn-groups-single">Input + Button</h3> <div class="input-group"> <input type="text" class="form-control " placeholder="email address"> <div class="input-group-btn"> <button type="button" class="btn btn-primary"> Submit </button> </div> </div>

Bootstrap 3 Glyphicons CDN

注意！ 在此拉取请求合并后，Bootstrap 图标又回来了。 经过过去几周的反复思考，我决定恢复 Glyphicons 图标......

停用 Bootstrap 表中表行的悬停状态

有没有办法在 Bootstrap Table 中停用表行上的悬停状态？ 它会自动设置在那里...