twitter-bootstrap-3 相关问题

身体高度比屏幕高度大100%

我已将 html body 标记高度设置为 100%，但在 Firefox 中显示的像素比屏幕多一些，因此会出现导航滚动条。除了指定任意值之外，我该如何调整？

bootstrap 3 datepicker禁用像预订表格这样的分钟

我想在预订表格中使用 bootstrap 3 日期选择器。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 ... 我想在预订表格中使用bootstrap 3 datepicker。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div> </div> 我只想禁用 11/22/2013 00:53 而不是全天 11/22/2013。 我还看到了这个示例，它禁用了 00 分钟，但如果您选择 16:00，则无法将其更改为 16:15。 有人可以帮助我吗？ 我不完全明白你需要什么。根据我得到的信息，你想改变分钟，但以步骤（5,10,15）为单位。为此，您可以使用您传递的链接的类似方法，但无需禁用步骤选择器。 $('.datetimepicker').datetimepicker({ format: 'DD/MM/YY - HH:mm' }).on('dp.show', function () { $('a.btn[data-action="incrementMinutes"], a.btn[data-action="decrementMinutes"]').removeAttr('data-action').attr('disabled', true); }); 笔 但是如果您不想显示分钟，只显示小时，您可以简单地更改时间选择器的格式。并且可以使用 moment.js 中的一些命名约定。如果您的格式类似于“DD/MM/YY - HH”，它只会显示小时。 该解决方案的缺点是选择器变得很奇怪，并且您无法真正知道自己在选择什么。因此，您在链接上提供的解决方案是仅选择时间的最佳方法。 经过很长一段时间后，我不得不在现有项目上使用引导日期时间选择器。所以我找到了stepping选项 stepping: 15 所以这里是 <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: one_month, minDate: new Date(), format: 'DD/MM/YYYY HH:mm', stepping: 15 }); }); </script>

如何更改 Bootstrap 导航栏的背景颜色

我正在尝试更改 Bootstrap 中编码的导航栏的颜色。到目前为止，已经内置了应用于导航栏的 Bootstrap 类来更改背景颜色和锚点链接...

如何在引导卡上添加关闭按钮？

我有一张使用以下代码的引导卡： 我有一张使用以下代码的引导卡： <div class="card card-outline-danger text-center"> <span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> 我使用以下代码来使关闭按钮正常工作： <span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span> 关闭按钮不起作用，我是引导程序新手。因此，我需要一些帮助。 这不是bootstrap的标准功能，所以你需要给图标绑定一个JS点击事件，并触发它来关闭父级.card。我还在图标中添加了 cursor: pointer，使其看起来像可以单击的东西。 $('.close-icon').on('click',function() { $(this).closest('.card').fadeOut(); }) .close-icon { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="card card-outline-danger text-center"> <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> 好吧，自从提出这个问题以来已经过去了一段时间，但仍然是实现可关闭卡片的好方法，无需任何自定义 JavaScript，仅使用 Bootstrap CSS 类，如下所示：card-header、Bootstrap 4 关闭图标的组合和 .mt-n5 上的负边距（此处为 card-body）。关闭图标很好地定位在卡片标题内，负边距将卡片内容拉近标题区域。 <div class="container"> <div id="closeablecard" class="card card-hover-shadow mt-4"> <div class="card-header bg-transparent border-bottom-0"> <button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="card-body mt-n5"> <h5 class="card-title">Your Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab. </p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> 要实际关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。 查看 JSFiddle 上的演示... HTH， 汉森 要真正关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。 通过， 拉古尔·K

如何让 Twitter Bootstrap Accordion 保持一组开放？

我正在尝试使用 Twitter 引导程序使用手风琴和折叠插件来模拟 Outlook 栏，到目前为止，我已经使折叠和手风琴工作正常，但它目前允许所有部分

引导程序通过右拉、左拉在 3 列上更改 div 顺序

我一整天都在研究这个问题，但没有找到解决方案。我在一个容器中一行有 3 列。 1：右侧内容——右拉 2：导航-左拉 三：主要内容 什...

Bootstrap 响应式图像长宽比

我正在与第三方网站合作，该网站允许我修改代码以满足我的需求。我有一个带有响应栏的产品页面。管理用户可以上传产品图片...

用于引导网格的媒体查询

我不是造型方面的专家，我正在使用 bootstap 进行小型项目。 所以，我的问题是网格系统。我有两台显示器，第一个显示器的分辨率为 1920x1080，第二个显示器的分辨率为 1366x768。 我想说

Bootstrap 3 网格在移动设备上无法缩放

我在使用 Bootstrap 3 时遇到问题 - 当我通过缩小页面来检查桌面上的响应功能时，它工作正常。它在 responsinator.com 等上也运行良好（来自桌面测试的 scr...

热去除网格之间的大空间

我试图在缩略图中显示一些广告，但它们之间有很大的空间..看看 我正在使用引导缩略图来显示产品。 回声' 我试图在缩略图中显示一些广告，但它们之间有很大的空间..看看吧 我正在使用引导缩略图来展示产品。 echo '<div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src='.$source.' alt="Generic placeholder thumbnail"> </div> <div class="caption"> <h3>'.$title.'</h3> <p>Price:Rs.'.$price.'</p><br> <p> <a href="'.$adress.'" class="btn btn-primary" role="button"> View </a> <a href="#" class="btn btn-primary" role="button"> Update </a> <a href="#" class="btn btn-default" role="button"> Delete </a> </p> </div> </div>'; CSS 引导程序： element.style { } @media (min-width: 992px) .col-md-3 { width: 25%; } @media (min-width: 992px) .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } @media (min-width: 768px) .col-sm-6 { width: 50%; } @media (min-width: 768px) .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } user agent stylesheetdiv { display: block; } Pseudo ::before element :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Pseudo ::after element :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Inherited from body body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } Inherited from html html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 请帮我移除大的空间。物品没有对齐。 针对特定网格尝试此操作： padding: 0

创建一个带有 3 条水平虚线或线条的 Bootstrap 3 按钮

如何创建一个 Bootstrap 3 按钮，其图标具有 3 条水平线/破折号作为典型的 Web 按钮设置。 ？ 我找不到这样的 ico/glyphicon 那么我怎样才能用 css 做到这一点？

在 Bootstrap 3 中单击导航栏元素外部时如何关闭打开的折叠导航栏？

如何在单击导航栏元素外部时关闭打开的折叠导航栏？目前，打开或关闭它的唯一方法是单击导航栏切换按钮。 请参阅此处的示例...

AdminLTE 项目与 Java 集成

我正在尝试将 AdminLTE 项目集成到我的 java maven 项目中。 https://github.com/almasaeed2010/AdminLTE 我已经下载了代码，但不知道从哪里开始集成，因为我是新手

2 列表，行距 = 2，长宽比为 1/1

我正在努力实现这个结果： 但我得到了这个： 我正在努力实现这个结果： 但我得到了这个： <table class="table" style="width: 100%;"> <tbody> <tr> <td rowspan="2" style="display: inline-block; width: 50%; aspect-ratio: 1/2;"> </td> <td style="display: inline-block; width: 50%; aspect-ratio: 1/1;"> </td> </tr> <tr> <td style="display: inline-block; width: 50%; aspect-ratio: 1/1;"> </td> </tr> </tbody> </table> 关于如何实现 rowspan = 2 的 1/1 表有什么想法吗？ 我的搜索表明 rowspan 和 inline-block 不能很好地配合。 但没有建议修复/替代方案。 这是我的解决方案 <table border class="table" style="width: 100%;"> <tbody> <tr> <td rowSpan="2">1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> </tbody> </table>

检查元素不工作/空白

每当我尝试检查元素时，什么也没有出现。我在 Chrome 上。我得到了 元素|网络|来源 |时间轴 |简介 |资源 |审计|安慰 菜单，然后每个菜单中都有一个子菜单...

如何在 Bootstrap 3 中的手风琴中显示选择选项

我正在尝试在 Bootstrap 32 手风琴内部使用 Bootstrap Select 插件（请参阅此演示），但 Select 选项隐藏在面板主体内： 我正在尝试在 Bootstrap 32 手风琴内部使用 Bootstrap Select 插件（参见此演示），但 Select 选项隐藏在 panel-body 中： <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> 为什么会发生这种情况，我该如何解决？ 下拉列表的位置问题。 小提琴：http://jsfiddle.net/52VtD/3386/ 只需在下拉列表中添加一个类即可使其位置相对。 .bootstrap-select .dropdown-menu{ position:relative; }

将 Bootstrap 从 3.3.4 升级到 4.0

我的网站曾经使用 Boostrap 3.3.4，自从我迁移到 Bootstrap 4 后，一切都坏了。 本质上我网站的结构非常简单，一个包含一些巨型内容的容器......

如何在 HTML 中的同一行中有 2 种字体大小的文本？

我正在使用引导程序和基本 HTML 代码开发前端 HTML 页面。我需要打印特定产品的价格，比如 63 美元。 我希望它在同一行，但 $ 的大小需要较小......

如何制作一个行为类似于选择表单元素的下拉菜单和下拉切换类

我需要一个下拉菜单来更改按钮/切换的标签，就像 HTML 中的选择标签一样。我怎么做？ 添加一些代码进行澄清，但不知道是否会有很大帮助。我知道...

Bootstrap 选项卡和 Echarts

在第二个选项卡上显示我的 Echarts 时遇到问题。该图表仅显示在第一个选项卡上，但导航到第二个选项卡时不会显示 ...