twitter-bootstrap 相关问题

无边框引导表格

尝试显示无边框的引导表。 当我删除（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>

无法让 Bootstrap+Popper 下拉菜单在 Laravel+Vite 中工作

我是一位经验丰富的开发人员（20 多年），但最近才开始使用 Laravel。我很少会被卡住，但是这个问题我无法解决。 我全新安装了最新版本的 La...

Bootstrap 4 导航栏下拉问题

我尝试将此导航栏下拉菜单分成两列，但它们相互冲突。 另一个问题是，在移动设备中搜索栏保持在底部。并且页面没有响应...

如何在 JavaScript 中停止 onclick 操作？

单击按钮时，我希望微调器出现 3 秒然后消失。我可以让它可见，但我不能让它再次隐形。 函数停止加载（）{ 文件。

Bootstrap3 下拉开关

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

Markdown 链接转义布局

我正在使用 Bootstrap 和 Jekyll 制作一个网站。我最近遇到一个问题，在博客文章中，如果作者的名字被超链接（例如，到 Google+ 个人资料），则 html 片段...

更新到 Bootstrap 5.3.3 后尝试运行 ASP.NET MVC Web 应用程序时收到错误

我正在使用 Visual Studio 2019，我刚刚使用 Nuget 包管理器将引导程序更新到版本 5.3.3。现在，当我运行 MVC Web 应用程序时，我的浏览器显示服务器错误并显示...

全高谷歌地图不适应窗口大小

我已将谷歌地图的高度设置为85%。如果窗户足够大，它就会有合适的尺寸。但如果窗口很小，它就会以某种方式重叠。 这里有一些图片 当窗户很大时...

如何在 Symfony 表单中添加引导日期时间选择器

我正在尝试在我的 Symfony 表单中使用 http://eonasdan.github.io/bootstrap-datetimepicker/ 。 我补充道： 我正在尝试在我的 Symfony 表单中使用 http://eonasdan.github.io/bootstrap-datetimepicker/。 我补充说： <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker-standalone.min.css') }}"> <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}"> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/jquery-3.1.1.min.js') }}"></script> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/moment.min.js') }}"></script> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/bootstrap.min.js') }}"></script> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/bootstrap-datetimepicker.min.js') }}"></script> 但现在我不知道如何更改我的表单类型以使用日期选择器 我尝试过类似的方法，但不起作用 ->add('date', DateTimeType::class, array( 'required' => true, 'widget' => 'single_text', 'attr' => [ 'class' => 'form-control input-inline datetimepicker', 'data-provide' => 'datetimepicker', 'html5' => false, ], )) 有人可以帮助我吗？ 您应该将 html5 键/值从 attr 移至 options : ->add('date', DateTimeType::class, array( 'required' => true, 'widget' => 'single_text', 'html5' => false, 'attr' => [ 'class' => 'form-control input-inline datetimepicker', 'data-provide' => 'datetimepicker', ], )) 我也面临着同样的问题。 Symfony 中用于日期时间类型的默认表单组件呈现另一组输入字段。 引导方法需要一个“正常”输入字段，其中日期时间呈现为字符串。所以你必须使用TextType::class 为了在实体中使用 DateTime，我添加了一个 EntityTransformer 来处理 sting 和 DateTime 之间的转换以进行读写操作。 你可以这样做： $builder->get( 'from' )->addModelTransformer( new CallbackTransformer( function ( $date ) { return $date->format( 'd.m.Y H:i' ); }, function ( $date ) { return new \DateTime( $date ); } ) ); 我不确定这是唯一的问题，但您可能需要将 DateTimeType::class 更改为 texttype::class。 我希望这能有所帮助！ 祝你好运

如果 div 的高度不适合打印介质，是否插入分页符？

我正在网页上动态创建要打印的元素。如果元素无法放入 A4 尺寸纸张的其余部分，我需要分页符。 例如这个问题：强制一个元素...

Symfony2：显示引导开关按钮并获取控制器中的选定值

我想在symfony2中实现以下字段。它有 2 个单选按钮，它们的样式类似于使用一些引导样式的 Switch。 示例在这里 在 html 和 bootstrap 之上，代码片段显示 de...

响应式设计 - 在小屏幕上每行显示 2 张卡片

我正在开发一个网页，其中有一排卡片，每张卡片都包含一个图像和一个标题。目前，我正在使用 Bootstrap 网格系统在较大的屏幕上每行显示 4 张卡片 (col-md-2)，...

引导程序中项目之间的空间

我正在使用 bootstrap 4，我有一个显示的项目列表，如下所示： 我正在使用 bootstrap 4 并且我有一个像这样显示的项目列表： <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ... </div> </div> </div> 在我使用 Google Chrome 的桌面视图中，我可以按行看到 3 个项目，但问题是列之间没有空格。所以我添加了一个类item-wr .item-wr { margin: 10px; } 但这里也有换行符，我只看到 2 个项目，行右侧有一些空格。 那么我怎样才能让每行 3 件物品col-md-4保持空间？ P.S 我希望每行的开头或结尾没有空格。每行的第一列不得有一些 margin-left 并且每行的最后一列不得有一些 margin-right 你必须在card内上课col-md-4 col-sm-4 col-12。因为col-md-4 col-sm-4 col-12这个类本身会填充并提供空间，所以你可以在列类中应用设计相关的类。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> </div> </div> 使用 Bootstrap 4 提供的填充实用程序类（如 pr-2）向右填充 2 个间距单位。参考这里 附注margin 会在盒子模型之外添加空间，因此您应该使用填充来防止换行。欲了解更多信息，请参阅此处

如何在 Bootstrap 4 中将卡片设置到 col-md 的中间[重复]

我想把这张卡放在中间而不是中心，该怎么做？ 我已经尝试使用 my-auto 但根本不起作用。 请检查我的代码并进行一些更改。谢谢！ 我的脚本： &l...

表格内表格或表格内表格，哪一个最适合有效的 Twitter Bootstrap 标记？

我正在开发一个基于 Twitter Bootstrap 的模板，我有一个疑问，如标题所示：表格内表格或表格内表格，哪一个最适合有效的 Twitter Bootstrap 标记？都是 va...

我不知道如何构建一个小型的流体网格（使用 Bootstrap）来添加第三列

我正在尝试使用 Bootstrap 的网格系统构建一个小网格，但我无法弄清楚。 问题：我正在尝试构建 3 列 - 第一列是一张大图片，其他 2 列有...

如何在bootstrap上正确定位

我想将按钮正确放置在我用红色绘制的位置，但我有点困惑。 我想要的是 ... 我想将按钮正确放置在我用红色绘制的位置，但我有点困惑。 <div class="container"> <div class="row text-center"> <div class="col mt-3 text-center"> <h1 class="hellotext text-light">Hey, <span class="usertext">how was your day?</span></h1> </div> <div class="row d-flex justify-content-center mt-4"> <button type="button" class="btn btn-circle btn-cry btn-xl">😢</button> <button type="button" class="btn btn-circle btn-bad btn-xl">😔</button> <button type="button" class="btn btn-circle btn-normal btn-xl">😐</button> <button type="button" class="btn btn-circle btn-good btn-xl">🙂</button> <button type="button" class="btn btn-circle btn-verygood btn-xl">🥳</button> </div> <div class="row mt-2"> <div class="col d-flex justify-content-center"> <textarea class="form-control w-50" cols="10" rows="7"></textarea> </div> <div class="row"> <div class="col d-flex justify-content-center"> <div class="btn submitbtn">Submit</div> </div> </div> </div> </div> </div> 我尝试更改 col、row 和 css，但我无法做到我想要的。如果我给submitbtn留200px的边距，我可以解决问题，但是这是正确的方法吗？如果您能告诉我我在代码中犯的错误，我也将不胜感激。 您可以将该宽度赋予外行，以使所有元素的宽度为 50%，而不是为文本区域指定 50% 的宽度。这样你就可以替换围绕按钮的 div 中的 justify-content-center 类。 请参阅下面的代码： <div class="container d-flex justify-content-center"> <div class="row text-center w-50"> <div class="col mt-3 text-center"> <h1 class="hellotext text-light">Hey, <span class="usertext">how was your day?</span></h1> </div> <div class="row d-flex justify-content-center mt-4"> <button type="button" class="btn btn-circle btn-cry btn-xl">😢</button> <button type="button" class="btn btn-circle btn-bad btn-xl">😔</button> <button type="button" class="btn btn-circle btn-normal btn-xl">😐</button> <button type="button" class="btn btn-circle btn-good btn-xl">🙂</button> <button type="button" class="btn btn-circle btn-verygood btn-xl">🥳</button> </div> <div class="row mt-2"> <div class="col d-flex justify-content-center"> <textarea class="form-control" cols="10" rows="7"></textarea> </div> <div class="row"> <div class="col d-flex justify-content-start"> <div class="btn submitbtn">Submit</div> </div> </div> </div> </div> </div>

数据关闭：如何在函数内部关闭引导模式

我有一个模式，我需要使用淘汰验证来验证一些输入。 当我单击提交按钮时，将调用一个函数来验证数据。预计以下功能...

页面重新加载后，使用 Twitter Bootstrap 保持当前选项卡处于活动状态？

我知道这个问题之前被问过并在以下帖子中得到回答： 页面重新加载后，如何使用 twitter bootstrap 保持当前选项卡处于活动状态？ 然而，鉴于我的知识有限

反转侧边栏的引导行行为

我需要侧边栏中的项目在大屏幕上垂直显示，在小屏幕上水平显示。 但使用 bootstrap 的 row，它会起到相反的作用。 有没有一种简单的方法来扭转行为以满足我的