twitter-bootstrap 相关问题

如何在 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，它会起到相反的作用。 有没有一种简单的方法来扭转行为以满足我的

Javascript Pesian DatePicker 计算闰年问题

大家好我希望你能帮助我解决这个问题。我有一个日期选择器，我在项目中多次使用它，它是一个组件。但现在到了波斯新年，我们有1403(Shamsi...

覆盖 z 索引

我正在使用 darkmode.js https://darkmodejs.learn.uno/ 库来实现暗模式。它使用 css mix-blend-mode 来引入深色模式。当我手动检查时，它会为暗模式应用变换：缩放（1）...

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

我有一张使用以下代码的引导卡： 我有一张使用以下代码的引导卡： <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：导航-左拉 三：主要内容 什...

如何在 Laravel 中通过 VueJS 使用 Bootstrap 4 图标

我已根据此处的说明使用 NPM 将 Bootstrap 图标安装到 Laravel/VueJS 应用程序中，https://icons.getbootstrap.com/。你下一步怎么做？ 如果我想使用 svg e...

按百分比设置 bootstrap 模态身高

我正在尝试制作一个带有主体的模态，当内容变得太大时会滚动。但是，我希望模式能够响应屏幕尺寸。当我将最大高度设置为 40% 时，它没有

如何在引导程序中的移动设备的垂直堆叠列之间添加空间

我有四个图像在引导程序的桌面上水平排列。在移动设备上，我希望这些图像垂直堆叠（他们确实这样做了）。唯一的问题是