twitter-bootstrap-3 相关问题

热去除网格之间的大空间

我试图在缩略图中显示一些广告，但它们之间有很大的空间..看看 我正在使用引导缩略图来显示产品。 回声' 我试图在缩略图中显示一些广告，但它们之间有很大的空间..看看吧 我正在使用引导缩略图来展示产品。 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 时遇到问题。该图表仅显示在第一个选项卡上，但导航到第二个选项卡时不会显示 ...

引导模式对话框中的默认按钮

我正在尝试在引导模式中设置默认按钮。这是代码：http://plnkr.co/edit/1aLlDdL8WfkUrBVt4q31?p=preview 在模式窗口中，我希望“提交”按钮成为默认按钮。 我

Bootstrap 3 模态窗口不显示

我正在使用 Bootstrap 3（完整版），并且在代码中使用 bootstrap 模式： 我正在使用 Bootstrap 3（完整版），并且我在代码中使用 Bootstrap 模式： <a data-toggle="modal" data-target="deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> <!-- Modal --> <div id="deleteMessage" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 此代码是我从官方文档复制的，但它不起作用，模式窗口不显示。 有什么问题吗？ 尝试将锚定代码更改为： <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 教程里好像有错字，data-target属性里应该多了个“#”。 您忘记将 # 包含到 data-target 属性中 <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 现场演示

如何使用 Angular 6 和 bootstrap 3.3.7 创建可折叠/可扩展/带有复选框列表的树结构

我正在尝试在父节点和子节点上都带有复选框的可折叠/树结构。我无法准确地创建它。我能够从 JSON 创建无序列表 { &...

将输入填充到 Bootstrap 表格单元格的高度和宽度

我有一个表格（使用 Bootstrap 3.0），每个单元格中都有一个输入字段 我有一个表格（使用 Bootstrap 3.0），每个单元格中都有一个输入字段 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table id="itemTable" border="1" class="table table-bordered table-striped"> <thead> <tr> <th >Quantity</th> <th>Unit</th> <th>Material Name</th> <th>PO Vatable</th> <th>PO TAX</th> <th>PO Total</th> </tr> </thead> <tbody> <tr> <td> <input type="number" min="1" class="form-control" name="Quan[]"> </td> <td> <select id="BX_gender" name="Unit[]"> <option>Kg</option> <option>Piece</option> <option>Meter</option> <option>Pound</option> <option>Gram</option> <option>Feet</option> </select> </td> <td><input type="text" name="Material[]"> </td> <td><input type="number" step="0.01" class="small" name="POVATABLE[]"> </td> <td><input type="number" step="0.01" class="small" name="POTAX[]"> </td> <td><input type="number" step="0.01" class="small" name="POTOTAL[]" onkeyup="onRequestTotalModification(this.parentNode.parentNode.rowIndex)"> </td> </tr> </tbody> </table> 我试图将输入设置为包含它的单元格的宽度和高度，但没有任何效果（即使是内联样式）。 我使用 thead 和 tbody 标签组织了表格，但它没有修复任何问题 如果您尝试让输入成为整个单元格，则需要删除 TD 元素上的引导程序默认填充。 https://jsfiddle.net/2ay5yuq3/2/ .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{ padding: 0; }

将标签与 Bootstrap Toggle 左侧对齐

我正在使用引导切换来创建开关，如下所示： 我正在使用引导切换来创建开关，如下所示： <form> <div class="checkbox"> <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox"> <label> Toggle Text Left <input type="checkbox" data-toggle="toggle" /> </label> </div> </form> 有没有办法将标签移到开关左侧？我尝试将文本放在输入之前，但不太合适。 http://jsfiddle.net/sjxd1vpt/2/ 或者，如果您不是特别需要标签标签，您可以使用跨度。 <form> <div class="checkbox"> <input type="checkbox" data-toggle="toggle" checked="checked" /> <span> Toggle Text Right </span> </div> <div class="checkbox"> <span> Toggle Text Left </span> <input type="checkbox" data-toggle="toggle" /> </div> bootstrap-toggle css 似乎有一个 margin-left: -20px; 只需将自定义类添加到所需的左标签即可。 .left .toggle { margin-left: 5px; } 这将维持 Bootstrap-Toggle 预期的结构，以防它们有样式绑定，例如： label input { // some input targeted styling } http://jsfiddle.net/sjxd1vpt/5/ 您应该使用 bootstrap container-fluid 包装器来实现效果。 <form> <div class="checkbox container-fluid" > <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox container"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> 默认情况下，Bootstrap 将 float: left 添加到 .form-check-input 只需用 float: none 覆盖它并在 html 中的输入之前放置标签。 交换标签和输入 为容器div设置style="display:contents" 设置 style="float:none;margin-left:0.5rem" 输入 您的标签标签应在输入标签之前关闭。 <form> <div class="checkbox"> <label> Toggle Text Right </label> <input type="checkbox" data-toggle="toggle" checked="checked" /> </div> <div class="checkbox"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> </form> 这应该可以防止按钮切换与文本重叠。 这里：http://jsfiddle.net/sjxd1vpt/4/

引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS，选择器“progress-bar”已更改为“bar”： ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此，将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。 不确定这种疯狂的原因是什么，似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？ 如果您使用 Bootstrap v4 并且需要动画，则需要使用 progress-bar-animated 而不是 active。

具有等效表行跨度和列跨度的引导网格

我正在尝试在 bootstrap3 中创建一个像这样的布局 在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ 。容器 { 顶部边距：10px； } 我正在尝试在 bootstrap3 中创建一个像这样的布局 在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ .container { margin-top: 10px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid"> <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div> <div class="span8"> <div class="row-fluid"> <div class="span6"><div class="well">2</div></div> <div class="span6"><div class="well">3</div></div> </div> <div class="row-fluid"> <div class="span6"><div class="well">4</div></div> <div class="span6"><div class="well">5</div></div> </div> </div> </div> <div class="row-fluid"> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> </div> 我能够使用嵌套网格来做到这一点 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="row mx-auto" style="height: 200px;"> <div class="col-sm-6"> <div class="row "> <!-- nested row 1 --> <div class="col-sm-12 "> <!-- nested quick links col --> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </div> <div class="row"> <!-- nested row 2 --> <div class="col-sm-6"> BBBBBBB </div> <div class="col-sm-6"> CCCCCCCCC </div> </div> </div> </div> <div class="col-sm-3"> DDDDDD </div> </div> </div>

使用引导响应网格系统时如何为图像提供动态宽度和高度

我正在使用 bootstrap 的网格系统，这是我的网站。问题是，在初始加载时，项目卡看起来非常糟糕，如下所示： 这是加载后的样子： 你可以...

仅在验证表单时打开模式

我想仅在表单完全验证无错误时打开模式对话框。首先，我禁用了按钮，以便它首先验证，并且仅当表单为