twitter-bootstrap-3 相关问题

我发现了一个奇怪的行为，我无法在元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-gr... 我发现了一个奇怪的行为，我无法在 <button> 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-group-buttons 这是一些标准行为还是可以编辑？我需要选择按钮中的文本。您可以做这个问题的相反操作：创建以下 CSS3： .list-group-item{ -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } 并链接样式表。它适用于我的火狐浏览器。编辑：将“全部”更改为“文本”，正如 Nenad Vracar 所说。现在它可以在 Chrome 和 Firefox 中运行可以设置user-select: text button { -webkit-user-select: text; /* Chrome all / Safari all */ -moz-user-select: text; /* Firefox all */ -ms-user-select: text; /* IE 10+ */ user-select: text; } <div class="col-sm-4"> <div class="list-group"> <button type="button" class="list-group-item">Cras justo odio</button> <button type="button" class="list-group-item">Dapibus ac facilisis in</button> <button type="button" class="list-group-item">Morbi leo risus</button> <button type="button" class="list-group-item">Porta ac consectetur ac</button> <button type="button" class="list-group-item">Vestibulum at eros</button> </div> </div> 小提琴以上答案均不适用于 Safari。如果该按钮仅用于显示，并且您同意它不再发送 onClick 事件，则可以使用 pointer-events: none 使其在 Safari 中正常工作。 button { -webkit-user-select: text; /* Chrome */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* IE 10+ */ user-select: text; pointer-events: none; /* Safari */ } 您可以像这样为按钮定义 css 属性对于按钮类添加光标：指针属性。您可以直接指定按钮或自定义 CSS 类光标：指针

css html twitter-bootstrap-3

回答 4 投票 0

如何创建双色导航栏？

我目前正在开发一个网站，我需要一个宽导航栏，其中只有三个链接/“按钮”。问题是所有所谓的按钮都是不同颜色的（附有

html css twitter-bootstrap-3 background-color navbar

回答 1 投票 0

通过 JavaScript 使用虚线参数添加表格标签

我正在尝试使用 Javascript 添加 Bootstrap Table 表标签。表标签的参数之一是数据分页。这种添加方法由于 - 而失败。我该如何解决...

javascript twitter-bootstrap-3 bootstrap-table

回答 2 投票 0

如何隐藏默认选择文件按钮

如何隐藏默认的选择文件按钮？这是我的html：如何隐藏默认的选择文件按钮？这是我的html： <div class="col-md-4"> <span class="btn btn-info "><i class="glyphicon glyphicon-plus"> </i> Browse <input type="file" style="position:relative;overflow:hidden" id="inPutArtistImage" name="ArtistImage" accept="image/png, image/jpeg" /> </span> </div> 该按钮的样式很好，带有引导按钮信息颜色和加号图标。我根本无法摆脱灰色的“选择文件”按钮。如有任何帮助，我们将不胜感激。我已经尝试了 StackOverflow 上的所有解决方案 2021 年更新你可以使用 ::-webkit-file-upload-button { display: none; } 我找到了另一个即使在非 WebKit 浏览器中也能工作的解决方案 ::file-selector-button { display: none; } 它隐藏了“选择文件”按钮，但文件名仍然可见。如果您还想隐藏文件名，只需使用 input 定位整个 display:none 简单。给input足够的padding-top，让它隐藏起来。不要忘记做box-sizing的事情!! input#file { display: inline-block; width: 100%; padding: 120px 0 0 0; height: 100px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4; border-radius: 20px; background-size: 60px 60px; } <form> <input id="file" type="file" /> </form> 这可能是您正在寻找的东西小提琴我在这里所做的是使用 display: none 样式隐藏原始输入，并在另一个 div 上使用 jQuery click() 来模拟输入上的点击。注意：我使用 split('\\') 来转义 \，因为它用在从文件选择器返回的 fakepath 中。通过 Stackoverflow 和其他教程寻找几个答案，我最终做了这段代码： $('#selectedFile').change(function () { var a = $('#selectedFile').val().toString().split('\\'); $('#fakeInput').val(a[a.length -1]); }); input#fakeInput { width: 100%; background-color: #f8f8f8; border-radius: 8px; display:block; padding: 11px 0; box-sizing: border-box; border:initial; height: 3em; } #buttonImage { float: right; position: absolute; right: 0; top: 0; background: #02a39c; padding:10px; color: white; font-weight: bold; border-radius: 0px 8px 8px 0px; height:1.25em; } #fakeDiv { width: 500px; position: relative; display: inline-block; } #selectedFile { opacity:0; position:absolute; left: 0; top: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="fakeDiv"> <input type="file" id="selectedFile" /> <input type="text" id="fakeInput" /> <span onclick="document.getElementById('selectedFile').click();" id="buttonImage" >Browse</span> </div> 基本上，你必须以一种棘手的方式来做。创建一个input type="file"，使其不可见（带有opacity或visibility属性，如果设置display=none，则不起作用）。输入常规内容并根据需要设置格式放置一个假按钮（在我的例子中是一个跨度）单击按钮以启动 input type="file" 单击只需用您通过不可见的输入文件上传的内容填写常规输入即可注意：如果代码片段不起作用（我第一次发布代码片段），请尝试this JsFiddle。在寻找一个简单的 CSS 解决方案时发现了这个。只需在链接的 css 文件中使用以下代码即可： input[type=file]::file-selector-button { visibility: hidden; } 归功于 Nikita Hlopov，https://nikitahl.com/custom-styled-input-type-file 在你的CSS中： input[type="file"] { display: none !important; !important 不是必需的。

css twitter-bootstrap-3

回答 6 投票 0

无边框引导表格

尝试显示无边框的引导表。当我删除（bootstrap.min.css）时，我可以隐藏边框，但是当添加它时，无法隐藏边框尝试显示无边框的引导表。当我删除（bootstrap.min.css）时，我可以隐藏边框，但是当添加它时，无法隐藏边框 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <div class="container"> <form action="" method="POST"> <div class="mb-3" style="width:100%;"> <input class=" form-control fromDT" style="width:100%;" type="date" name="fromDT" style="" id="fromDT" value="22-2-2022" /> <input class=" form-control toDT" type="date" name="toDT" style="" id="toDT" value="11-1-2000" /> <input type="submit" id="btn-save" class="btn btn-danger form-control btn-save" style="" value="Submit" name="SEARCH"> </div> </form> <br><br><br> <div class="table-responsive"> <table class="table table-borderless" border="0" cellspacing="0" cellpadding="0"> <tr> <th class="not_mapped_style" style="line-height:0; text-align:center">ID</th> <th class="not_mapped_style" style="line-height:0; text-align:center">date</th> <th class="not_mapped_style" style="line-height:0; text-align:center">ref </th> <th class="not_mapped_style" style="line-height:0; text-align:center">amount</th> <th class="not_mapped_style" style="line-height:0; text-align:center">income</th> <th class="not_mapped_style" style="line-height:0; text-align:center">Balance</th> </tr> <tr> <td style="line-height:0; text-align:center"><b>433</b></td> <td style="line-height:0; text-align:center">22-2-2022</td> <td style="line-height:0; text-align:center">44332</td> <td style="line-height:0; text-align:center">443</td> <td style="line-height:0; text-align:center">1111</td> <td style="line-height:0; text-align:center">899989</td> </tr> <tr> <td style="line-height:0; text-align:center">100</td> <td style="line-height:0; text-align:center">22-2-2024</td> <td style="line-height:0; text-align:center">4333</td> <td style="line-height:0; text-align:center">400$</td> <td style="line-height:0; text-align:center">0</td> <td style="line-height:0; text-align:center">1600$</td> </tr> <tr> <td style="line-height:0; text-align:center">100</td> <td style="line-height:0; text-align:center">22-2-2024</td> <td style="line-height:0; text-align:center">4333</td> <td style="line-height:0; text-align:center">400$</td> <td style="line-height:0; text-align:center">0</td> <td style="line-height:0; text-align:center">1600$</td> </tr> </div> 解决了... 我使用了这个CSS代码 <style> .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid rgba(221, 221, 221, 0)!important; } .table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid rgba(221, 221, 221, 0)!important; } </style>

html css twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

Bootstrap3 下拉开关

我想开发仅适用于移动屏幕尺寸的内联网Web应用程序，我不需要响应式设计技术。我想在右上角有一个切换按钮，按下它时...

twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

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

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

html css twitter-bootstrap-3

回答 3 投票 0

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>

jquery twitter-bootstrap-3 datepicker

回答 2 投票 0

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

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

html css twitter-bootstrap-3 navbar

回答 5 投票 0

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

我有一张使用以下代码的引导卡：我有一张使用以下代码的引导卡： <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">×</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

html css twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

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

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

twitter-bootstrap accordion twitter-bootstrap-3

回答 13 投票 0

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

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

css twitter-bootstrap css-float twitter-bootstrap-3

回答 3 投票 0

Bootstrap 响应式图像长宽比

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