Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用
我正在尝试从 Pixabay api 中获取图像数据，我想显示编辑器选择的图像。 问题在于布局。我试图在每行显示 3 或 4 个图像，但布局是
我有一个带有自己的css文件的项目。 现在我想使用一些图标。 Bootstrap 图标是一个不错的选择。但是，我只需要图标。我不需要任何其他东西。我进入自定义页面自定义我的
是否可以在 Bootstrap 3 中并排显示两个表格？ 每个人都尝试制作每一个 col-md-6，虽然它缩小了宽度，但它们不会彼此相邻包装（相反，一个是在......
为什么当我单击齿轮图标时没有出现我的 Bootstrap 下拉菜单？
我试图在单击时显示齿轮图标和下拉菜单。 这是我的代码，但下拉菜单没有出现。 有什么想法我做错了什么吗？ 我试图在单击时显示齿轮图标和下拉菜单。 这是我的代码，但下拉菜单没有出现。 有什么想法我做错了什么吗？ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i> </h4> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <!-- Add more menu items as needed --> </ul> </div> </body> 您有一些与 docs 和良好的语义标记不相符的内容： 切换器应该是一个按钮。标题不是可点击的元素，不应该这样使用，以实现可访问性。 下拉菜单必须是其切换器的下一个兄弟。这意味着将其放入标题元素内。不幸的是，从语义角度来看这也很糟糕，因此请考虑重构布局来解决这个问题。 不要省略文档中显示的 ARIA 属性，也是为了可访问性。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="dropdown"> <h4> Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </h4> </div> </body> 这是我的“最终”代码，包含@isherwood 的更改 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jQuery 3.4.1 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap 3.4.1 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- Bootstrap 3.4.1 JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="d-flex align-items-center"> <h4 style="display: inline;">Drop down menu test:</h4> <div class="dropdown" style="display: inline-block;" > <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="bi bi-gear"></i> </button> <ul class="dropdown-menu" aria-labelledby="dropdownBtn"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </body>
使用 $.cookie() 的 cookies 保存多个面板的折叠状态
我正在尝试确定如何使用 $.cookie 保存可折叠面板的折叠状态。 到目前为止，这个问题很有帮助，但仍然缺少最终的解决方案。 我有什么解决方案...
将 bootstrap 列拆分为 n 行，高度相等，填充父级高度
我对 Bootstrap 很陌生，在尝试重现以下模板时，我正在与网格系统作斗争： 在此示例中，我有 3 列： 第一列包含一些信息/图片。这个合作...
我试图将图像始终放在某些元素的中间和中心，唯一的问题是它不起作用 这是我的代码 CSS .panel - 空{ 宽度：100%； 高度：400 像素； /*...
这是您通常使用切换器的方式吗？例如，在本例中，我通过将变量设置为“禁用”来禁用它。 如果@code 中选中或没有选中，如何获取该值
Bootstrap 3.3.2 移动导航子菜单按钮在单击时未显示在父按钮下
我希望在 Bootstrap 3.3 中修复我的移动导航，以在单击时显示子菜单项。父按钮不应链接到任何内容，而只显示子链接。 目前导航不会显示
如果状态更改为 true 或 false，如何动态更改某些引导开关 CSS 类？事实上，如果可能的话，添加一个新类也可能会解决我的问题。有没有简单的...
我正在尝试以悬停使按钮颜色变浅而不是颜色变深的方式设计按钮的样式。我尝试了引导程序自定义页面（http://getbootstrap.com/customize/），它...
假设我们有以下代码： ... 假设我们有以下代码： <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9"> <router-outlet></router-outlet> </div> </div> </div> 当 router-outlet 获取的组件是 myComponent 时，我想为 <div class="col-sm-8 col-md-9"> 提供彩色背景。这样做的目的是我希望背景颜色占据列的所有宽度。 有人有窍门吗？ 您可以通过以下方式完成这项工作： [style.background-color]="getBackgroundColor()" 在你的component.ts中： constructor(private router: Router) { } ngOnInit() { this.router.events.subscribe((route: any) => this.route= route); } getBackgroundColor() { if (this.url) { if (this.route.url === '/yourRoute'{ return 'white' } else { return '#6772e5' } } else { return '#6772e5' } } 有几种方法可以做到这一点。如果您希望父组件在某个子组件处于活动状态时更改样式，则需要一些编码才能解决。 方法一：共享服务 您需要创建一个共享服务来控制父组件订阅的状态。 “emitChange”方法将更改状态“fillColorSubject”，该状态作为可观察的“fillColor”返回以进行订阅。 填充颜色服务.ts： import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class FillColorService { private fillColorSubject = new Subject<boolean>(); fillColor = this.fillColorSubject.asObservable(); emitChange(fill : boolean) { this.fillColorSubject.next(fill); } } 子组件将在初始化和销毁时向服务发出更改。 my.component.ts： import { Component, OnInit, OnDestroy } from '@angular/core'; import { FillColorService } from 'fill-color-service'; @Component( { templateUrl: 'my.component.html' } ) export class myComponent implements OnInit, OnDestroy { constructor ( private _fillColorService: FillColorService ) { } ngOnInit() { this._fillColorService.emitChange(true); } ngOnDestroy() { this._fillColorService.emitChange(false); } } 现在父组件需要订阅该服务。当状态改变时，一个开关（fillColumn）将改变列状态。 parent.component.ts: import { Component } from '@angular/core'; import { FillColorService } from 'fill-color-service'; @Component( { templateUrl: 'parent.component.html' } ) export class parentComponent { fillColumn : boolean; constructor ( private _fillColorService: FillColorService ) { _fillColorService.fillColor .subscribe( fill => { this.fillColumn = fill; }); } } 您的模板需要能够通过条件类反映更改。 parent.component.html: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }"> <app-component></app-component> </div> </div> </div> 方法2：从Child发出事件 此方法不起作用，因为它不允许绑定。您需要为此定义自己的选择器。除了通过直接事件绑定之外，此方法与共享服务的思路相同。 首先，父类有一个方法（fillColor），可以触发该方法来改变开关（fillColumn）。 parent.component.ts: import { Component } from '@angular/core'; @Component( { templateUrl: 'parent.component.html' } ) export class parentComponent { fillColumn : boolean; fillColor( fill : boolean = false ) { this.fillColumn = fill; } } 然后，子 myComponent 需要发出一个带有布尔值的事件 (fillParentColor) 来触发父组件的更改。 my.component.ts： import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; @Component( { selector: 'app-component', templateUrl: 'my.component.html' } ) export class myComponent implements OnInit, OnDestroy { @Output() fillParentColor = new EventEmitter<boolean>(); ngOnInit() { this.fillParentColor.emit(true); } ngOnDestroy() { this.fillParentColor.emit(false); } } 最后，您的模板需要能够在发出子事件时触发父组件事件。当 myComponent 的“fillParentColor”事件被触发时，parentComponent 的“fillColor”事件将被触发，并带有一个布尔参数。您还需要根据“fillColumn”开关将条件类（填充）添加到您的列中。 parent.component.html: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="col-sm-8 col-md-9" [ngClass]="{ 'fill': fillColumn }"> <app-component (fillParentColor)="fillColor($event)"></app-component> </div> </div> </div> 简答 使用： ：主机{背景：矢车菊蓝色； } 作为托管组件的 CSS，用于更改路由器插座的背景。 长答案：Angular CSS 伪选择器/修饰符 您可以使用 :host 修饰符影响托管组件。如果您想更改路由器出口样式，请将 css 添加到将托管的组件中。
如何编写代码，当我单击asp.net上的按钮时，会出现引导程序或消息框的警报消息？ protected void ButtonLogin_Click（对象发送者，EventArgs e） { //
我使用以下 HTML 代码： 1 2 我使用以下 HTML 代码： <div id="list"> <div class="row"> <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div class="col-md-3">3</div> <div class="col-md-3">n-times</div> </div> </div> 所以，我需要在页面底部滚动并水平显示一行无限列。 我该怎么做？ 所以，我尝试为 width 容器设置固定 list 并设置了 overflow-x: auto 连续超过 12 个列单元是可以的。它会导致列换行，但您可以使用 Flexbox 覆盖换行。 Bootstrap 4使用flexbox和实用程序类来获得水平滚动布局.. <div class="container-fluid"> <div class="row flex-row flex-nowrap"> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> </div> </div> Bootstrap 4 演示： http://codeply.com/go/GoFQqQAFhN 另请参阅：Bootstrap 中水平滚动的卡片列表 对于 Bootstrap 3，可以使用一些 Flexbox 的 CSS 来完成。 . row > .col-xs-3 { display:flex; flex: 0 0 25%; max-width: 25% } .flex-nowrap { -webkit-flex-wrap: nowrap!important; -ms-flex-wrap: nowrap!important; flex-wrap: nowrap!important; } .flex-row { display:flex; -webkit-box-orient: horizontal!important; -webkit-box-direction: normal!important; -webkit-flex-direction: row!important; -ms-flex-direction: row!important; flex-direction: row!important; } Bootstrap 3 演示：http://codeply.com/go/P13J3LuBIM 另一种方式： CSS： #list .row {white-space:nowrap;} #list .row > div {display:inline-block;float:none;} 水平滚动的Js： window.addEventListener('mousewheel', function(e){ e.preventDefault(); var step = -100; if (e.wheelDelta < 0) { step *= -1; } var newPos = window.pageXOffset + step; $('body').scrollLeft(newPos); }) Bootply：https://www.bootply.com/pbenard/usmX12rxgP Carol 解决方案的 bootstrap 5 变体是 <div class="row overflow-x-auto flex-nowrap"> <!-- your cols here --> </div>
我需要在刷新从 AJAX 请求获取数据的表后立即从 Bootstrap 表获取数据。 table.bootstrapTable('刷新'); var data = table.bootstrapTable('getData'); ...
我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： 我正在尝试实现 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码： <div class="navbar navbar-fixed-top navbar-default"> <div class="navbar-inner"> <div class="container"> <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <img src="/Content/themes/next/images/logo.png" /></a> <div class="nav-collapse"> <ul class="nav"> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> <li> <a href="#">Item 1</a></li> </ul> </div> <ul class="nav pull-right"> <li> <a href="#"> <div class="nextCog"></div> </a> </li> </ul> <span class="navbar-text pull-right">superpup1 </span> </div> </div> </div> 它制作了一个漂亮的导航栏： 但是，我希望徽标（绿色）始终保留在中间。我将此样式添加到具有“品牌”类别的标签中： <a class="brand" style="margin: 0; float: none; text-align:center" href="#"> <img src="/Content/themes/next/images/logo.png" /> </a> 它部分解决了问题：徽标位于中间，但它将其余的导航栏元素向下推： 这是我想消除的不良影响。你能提出一个解决方案吗？也许从一开始就将徽标居中的方法是错误的？ 试试这个： .navbar { position: relative; } .brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; } 将徽标居中 50% 并减去徽标宽度的一半，这样在放大和缩小时就不会出现问题。 参见小提琴 最简单的方法是css变换： .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } 演示：http://codepen.io/candid/pen/dGPZvR 这种方式也适用于徽标的动态大小背景图像，并允许我们利用文本隐藏类： CSS： .navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; transform: translateX(-50%); left: 50%; position: absolute; width: 200px; /* no height needed ... image will resize automagically */ } HTML： <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text </a> 我们也可以使用 Flexbox。然而，使用这种方法我们必须将 navbar-brand 移到 navbar-header 之外。这种方式很棒，因为我们现在可以并排显示图像和文本： .brand-centered { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; top: 0; } .navbar-brand { display: flex; align-items: center; } 演示：http://codepen.io/candid/pen/yeLZax 要仅在移动设备上实现这些结果，只需将上述 css 包装在媒体查询中： @media (max-width: 768px) { } Bootstrap 5（2022 年更新） 在 Bootstrap 5 中，mx-auto 或 flexbox justify-content-center 仍然可以用于将品牌和其他元素居中。 https://codeply.com/p/UKfeHAJQQC Bootstrap 4（2018 年更新） 在Bootstrap 4中，mx-auto或flexbox可用于将品牌和其他元素居中。有关说明，请参阅如何在 Bootstrap 中居中定位导航栏内容。 Bootstrap 3（原始答案） 看看这个例子是否有帮助：https://codeply.com/p/G71Uruhqwy 品牌以..为中心 .navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; } 您的标记适用于 Bootstrap 2，而不是 3。不再有 navbar-inner。 编辑 - 另一种方法是使用 transform: translateX(-50%); .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } https://codeply.com/p/3kkmEHtVGH 另请参阅： 引导导航栏左对齐、居中或右对齐项目 老问题，但仅供后代使用。 我发现最简单的方法是将图像作为导航栏品牌的背景图像。只需确保输入自定义宽度即可。 .navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); } <style> .navbar-brand { margin: auto; } </style> <!--HTML--> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="logo goes here" width="100" height="100" class="logo" alt="" loading="lazy"> </a> </nav> 徽标真正居中且链接合理的解决方案。 导航的最大推荐链接数为 6，具体取决于每个链接中单词的长度。 如果您有 5 个链接，请插入一个空链接并使用以下样式设置： class="hidden-xs" style="visibility: hidden;" 这样链接的数量总是偶数。 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <style> .navbar-nav > li { float: none; vertical-align: bottom; } #site-logo { position: relative; vertical-align: bottom; bottom: -35px; } #site-logo a { margin-top: -53px; } </style> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Nav</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav nav-justified navbar-nav center-block"> <li class="active"><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 要查看结果，请单击 run snippet，然后单击 full page 小提琴 由于它是一个 Flexbox（可能是由于 justify-content:space-between BT4 css 属性。），如果您添加第三个元素（名称和按钮的同级元素），它会自然地将代码中的第二个元素居中。 我只是在 a 之后添加 <span>login</span> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-sm navbar-light bg-light mt-5"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <span>login</span> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> 就我而言，徽标的高度很重要，因为它设置了标题的高度。 所以一个简单的技巧就是放两个标志。一个隐藏的将设置标题最小高度，这样徽标就不会被裁剪。另一个处于绝对位置，如Brian Willis 的回答。 JSFiddle HTML： <header class="bg-primary"> <nav class="navbar"> <p>Left-content</p> <a class="navbar-brand bg-secondary" href="/"> <img src="" alt="My-logo"> </a> <!-- The hidden logo set the header minimal height so the logo isn’t croped --> <img class="logo-hidden" src="" alt="My-logo"> <p>Some-right-content-that-is-a-bit-too-large</p> </nav> </header> CSS： .navbar-brand { transform: translateX(-50%); position: absolute; left: 50%; } .logo-hidden { visibility: hidden; } img { font-size: 4rem; }
当我单击另一个下拉列表中的项目时，我试图打开 Bootstrap 下拉列表。 这个想法是从第一个下拉列表中选择一个城市 - 然后脚本将自动打开第二个下拉列表，其中包含...
我想在不同的设备中显示不同的图像（不是背景图像）。是否可以使用 bootstrap 3.x 进行如下操作？ 对于大屏幕 对于
我有一个生日输入文本，我使用 Bootstrap datepicker v4。 表格位于 容器内。如图所示，日期选择器日历被“”边框隐藏 我有一个生日输入文本，我使用 Bootstrap datepicker v4。 表格位于<div class="media">容器内。如图所示，日期选择器日历被“媒体”div 的边框隐藏，我无法用 z-index 解决这个问题，它不起作用。 当我对媒体和选项卡内容这两个类使用 overflow: visible 时，字段失去了宽度并且显示布局发生了变化（参见第二张图）。 <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> <div class="tab-wrap"> <div class="media"> <div class="parrent pull-left"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><?= lang('BASIC_INFO'); ?></a></li> <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02"><?= lang('PUBLIC_PROFILE'); ?></a></li> <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><?= lang('INTERESTS'); ?></a></li> <li class=""><a href="#tab4" data-toggle="tab" class="tehnical"><?= lang('FOTOS'); ?></a></li> </ul> </div> <div class="parrent media-body"> <div class="tab-content"> <div class="tab-pane fade active in" id="tab1"> <div class="media"> <div class="media-body"> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' id='bdate' name='bdate' class="form-control" value="<?= $userProfile ? $userProfile['bdate'] : '' ?>"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> 起诉后的结果overflow: visible; 在父容器（例如 overflow: hidden;）上查找 .media，并查看是否可以覆盖它或将其删除（如果已设置）（overflow: visible; 将是覆盖）。 我只是猜测，因为我不知道你的完整 CSS 是什么样子，但另一种可能性可能是你尝试应用的 z-index 被覆盖，因为你使用的规则不如 Bootstrap CSS 中的规则具体。检查浏览器开发人员工具中应用的样式，以验证您提供的 z-index 是否优先。 你可以试试这个 $('selector').datetimepicker().on('dp.show',function(){ $('.media').css({'overflow':'visible'}); }).on('dp.hide',function(){ $('.media').css({'overflow':'hidden'}); }) 按照@trungbadao的回答，即使日期时间选择器有更新，我们也需要将溢出设置为隐藏，因此他的答案可以这样更新： $('selector').datetimepicker().on('dp.show',function(){ $('.media').css({'overflow':'visible'}); }).on('dp.hide',function(){ $('.media').css({'overflow':'hidden'}); }).on('dp.change',function(){ $('.media').css({'overflow':'hidden'}); }) 经过 4 小时的搜索和尝试，这对我有用，我有一个祖先，它的位置相对溢出 x 隐藏，所以我将其直接父 .date 位置设为静态，并固定了实际的日期时间选择器位置。 .date{ position: static; } .bootstrap-datetimepicker-widget{ position:fixed } $(".date").datetimepicker({ locale: "{{ LANGUAGE_CODE }}-ca", keepOpen: false, format: "YYYY-MM-DD HH:mm", });
以下是三种不同的按钮尺寸： 批准 以下是三种不同的按钮尺寸： <div class="btn-group btn-small"> <button class="btn btn-small btn-success" href="#" type="button">Approve</button> <button class="btn btn-small btn-danger" href="#" type="button">Deny</button> </div> <div class="btn-group"> <a class="btn btn-mini btn-success" href="#">Approve</a> <a class="btn btn-mini btn-danger" href="#">Deny</a> </div> <div class="btn-group"> <a class="btn btn-success" href="#">Approve</a> <a class="btn btn-danger" href="#">Deny</a> </div> 所有这三个结果都是这样的： 为什么 btn、btn-success、btn-danger 和 btn-group 都可以工作，但 btn-mini/small/etc 却不能？ Bootstrap 将其按钮的名称从 2.x ➡ 更改为 3.x 版本对比 | 2.x | 3.x | 4.x | |------------|---------|---------| | .btn-large | .btn-lg | .btn-lg | | .btn-small | .btn-sm | .btn-sm | | .btn-mini | .btn-xs | - | Bootstrap 3 演示 因此您更新后的代码应如下所示： <div class="btn-group"> <a class="btn btn-xs btn-success" href="#">Approve</a> <a class="btn btn-xs btn-danger" href="#">Deny</a> </div> <br> <div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a> <a class="btn btn-sm btn-danger" href="#">Deny</a> </div> <br> <div class="btn-group"> <a class="btn btn-success" href="#">Approve</a> <a class="btn btn-danger" href="#">Deny</a> </div> jsFiddle中的演示将产生以下结果： 各种版本的文档 引导按钮 2.x 引导按钮3.x 引导按钮 4.x 迁移指南2➡3 迁移指南 3 ➡ 4 （如果有人来到这里想知道为什么 btn-xs 或 btn-group-xs 在 >= 4.0 中不起作用） 将日志从 bootstrap 3.0 更改为 4.0： 完全删除了 .btn-xs 类，因为 .btn-sm 比例很大 比 v3 小。 ... 由于删除了 .btn-xs，所以完全删除了 .btn-group-xs 类。 来源 如果您使用3.0版本，则必须更改课程 http://jsfiddle.net/WrQNh/1/ <div class="btn-group btn-small"> <button class="btn btn-xs btn-success" href="#" type="button">Approve</button> <button class="btn btn-xs btn-danger" href="#" type="button">Deny</button> </div> <br> <div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a> <a class="btn btn-sm btn-danger" href="#">Deny</a> </div> <br> <div class="btn-group"> <a class="btn btn-success" href="#">Approve</a> <a class="btn btn-danger" href="#">Deny</a> </div> 还要确保如果 bootstrap.css 被我们自己定制的 *.css 文件覆盖，那么您将 .btn-sm... 逻辑添加到您的定制 *.css 文件中。事实证明，这就是我的案例的问题。