Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
通常，当你有一块文本时，你可以将图像向左或向右浮动以将文本包裹在其周围，但在 Flexbox 中浮动不起作用，我正在努力寻找解决方案。 Bootstrap 4 是
我已经通过composer安装了cakephp插件twbs/bootstrap 作曲家需要 twbs/bootstrap:4.0.0 已成功加载到 bootstrap.php 普金::loadAll(); 下一个设置是修改助手，...
我正在尝试创建一个水平卡片列表，其中一次显示 3 张卡片，其他卡片可水平滚动，如下所示： 这可以用 CSS 很容易地完成，但我想......
我正在使用 ng-bootstrap 编写一个带有 Bootstrap 的 Angular 应用程序。我有一个封装在这样的组件中的弹出窗口： HTML（弹出组件） 数据 1：{{ v.data... 我正在使用 ng-bootstrap 编写一个带有 Bootstrap 的 Angular 应用程序。我有一个封装在这样的组件中的弹出窗口： HTML（弹出框组件） <div> <div>Data 1: <i>{{ v.data1 }}</i></div> <div>Data 2: <i>{{ v.data2 }}</i></div> </div> 此弹出窗口在另一个组件中打开： HTML <div *ngFor="let v of vector"> <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span> </div> <ng-template #popOver> <popover></popover> </ng-template> 我需要将 ngFor 的 v 参数传递给弹出窗口。我怎样才能实现这个目标？ 这是 Angular 的基本技术如何将数据传递给组件。 所以你需要更新你的弹出框组件： popover.component.html <div> <div>Data 1: <i>{{ data.data1 }}</i></div> <div>Data 2: <i>{{ data.data2 }}</i></div> </div> popover.component.ts @Component({ selector: 'popover', templateUrl: './popover.component.html' }) export class PopoverComponent { @Input() data: any; } 然后更新你的 ngFor： <div *ngFor="let v of vector"> <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span> <ng-template #popOver> <popover [data]="v"></popover> </ng-template> </div> 这是一个示例https://stackblitz.com/edit/angular-laqjog 对于其他偶然发现这个问题的人（YMMV）。 另一种轻量级方法是在线提供数据，而不是依赖单独的组件。 <div ngbPopover= "Start date: {{task.start}}" popoverTitle="Popover" container="body"> </div> 如果您的模板不太重，这可能会起作用。
我试图通过给 .carousel-indicators 一个 bottom: -50px; 来移动滑块图像下的指示器；但指标就这样消失了。现在我猜这与结束有关...
Bootstrap 4响应实用程序可见/隐藏的xs sm lg不起作用
当迁移到Bootstrap 4时，新的响应实用程序隐藏/可见类出现问题。我知道.hidden-类已从v3中删除，并替换为.hidden-*-up ....
我知道，引导4使用新的显示公用事业根据屏幕大小来显示或隐藏信息。我的问题是如何使一个表中的这些工作？我想删除列随着屏幕尺寸...
我有一个bootstrap网站，当屏幕小于992px时添加汉堡包。 HamBurger代码是这样的
使用Flexbox的Bootstrap 4的CDN？ [关闭]
是否有CDN提供启用Flexbox的Bootstrap 4 Alpha？我找到了https://www.bootstrapcdn.com/alpha/，但看起来它已禁用Flexbox。编辑：Bootstrap 4已经......
dl列表视图在bootstrap 4中不起作用，与bootstrap 3 HTML中的相同： ＆...
在Bootstrap 4中，如何更改导航栏的背景颜色？ twbscolor的代码不起作用。我想使背景颜色为不同颜色，字体颜色为白色。
IE11 flexbox问题：bootstrap 4卡高度最大的儿童卡身“img-fluid”
我正在使用bootstrap 4.0.0中的模板，我将用于包含许多（50+）混合比例图像的多个图库页面。我有一个网格布局，除IE11外，效果很好。我的照片是......
bootstrap 4 有内置的水平分隔线吗？我可以做这个， .h-分隔符{ 边距顶部：5px； 底部边距：5px； 高度：1px； 宽度：100%； border-top:1px 实心 g...</desc> <question vote="167"> <p>bootstrap 4 有内置的水平分隔线吗？这个我可以，</p> <pre><code><style type="text/css"> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> </code></pre> <p>但是我想使用内置的引导程序 css，我在文档中的任何地方都找不到它，也许我错过了它。</p> </question> <answer tick="true" vote="248"> <p>HTML 已经有一个名为<pre><code><hr/></code></pre>（“水平规则”的缩写）的内置水平分隔线。 Bootstrap 样式它<a href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L416-L421" rel="noreferrer">像这样</a>：</p> <pre><code>hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <p> Some text <hr/> More text </p></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="85"> <p><strong>Bootstrap 4</strong> 为 HTML 内置水平分隔线定义一个 CSS 样式<pre><code><hr /></code></pre>，所以直接使用它。</p> <p>您还可以使用间距实用程序自定义边距：<pre><code>mt</code></pre> 用于边距顶部，<pre><code>mb</code></pre> 用于边距底部，<pre><code>my</code></pre> 用于边距顶部和底部。整数代表小边距的间距<pre><code>1</code></pre>和大边距的<pre><code>5</code></pre>。这是一个例子：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <hr class="mt-2 mb-3"/> <!-- OR --> <hr class="my-12"/> <!-- It's like --> <hr class="mt-3 mb-3"/></code></pre> </div> </div> <p></p> <p>我以前只用一个<pre><code>div</code></pre>和<pre><code>border-top</code></pre>像：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="border-top my-3"></div></code></pre> </div> </div> <p></p> <p>但这是完成工作的 <em>silly</em> 方法，您可能会遇到一些问题。所以只需使用<pre><code><hr /></code></pre>.</p> </answer> <answer tick="false" vote="55"> <p><strong>对于 Bootstrap 4</strong></p> <p><pre><code><hr></code></pre> 仍然适用于普通分隔线。但是，如果你想要一个中间有文字的分隔线：</p> <pre><code><div class="row"> <div class="col"><hr></div> <div class="col-auto">OR</div> <div class="col"><hr></div> </div> </code></pre> </answer> <answer tick="false" vote="18"> <p>对于下拉菜单，是的：</p> <p><a href="https://v4-alpha.getbootstrap.com/components/dropdowns/" rel="noreferrer">https://v4-alpha.getbootstrap.com/components/dropdowns/</a></p> <pre><code><div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </code></pre> </answer> <answer tick="false" vote="12"> <p><strong>对于 Bootstrap v4；</strong></p> <p>细线;</p> <pre><code><div class="divider"></div> </code></pre> <p>中等粗线；</p> <pre><code><div class="divider py-1 bg-dark"></div> </code></pre> <p>粗线;</p> <pre><code><div class="divider py-1 bg-dark"><hr></div> </code></pre> </answer> <answer tick="false" vote="7"> <p>您可以使用 <pre><code>mt</code></pre> 和 <pre><code>mb</code></pre> 间距实用程序为 <pre><code><hr></code></pre> 添加额外的边距，例如：</p> <pre><code><hr class="mt-5 mb-5"> </code></pre> <p><a href="https://getbootstrap.com/docs/4.3/utilities/spacing/" rel="noreferrer">https://getbootstrap.com/docs/4.3/utilities/spacing/</a></p> </answer> <answer tick="false" vote="5"> <p>这里有一些自定义实用程序类：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>hr.dashed { border-top: 2px dashed #999; } hr.dotted { border-top: 2px dotted #999; } hr.solid { border-top: 2px solid #999; } hr.hr-text { position: relative; border: none; height: 1px; background: #999; } hr.hr-text::before { content: attr(data-content); display: inline-block; background: #fff; font-weight: bold; font-size: 0.85rem; color: #999; border-radius: 30rem; padding: 0.2rem 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* * * ========================================== * FOR DEMO PURPOSES * ========================================== * */ body { min-height: 100vh; background-color: #fff; color: #333; } .text-uppercase { letter-spacing: .1em; }</code></pre> <pre><code><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"> <div class="container py-5"> <!-- For Demo Purpose --> <header class="py-5 text-center"> <h1 class="display-4">Bootstrap Divider</h1> <p class="lead mb-0">Some divider variants using &lt;hr&gt; element. </p> </header> <div class="row"> <div class="col-lg-8 mx-auto"> <div class="mb-4"> <h6 class=" text-uppercase">Dashed</h6> <!-- Dashed divider --> <hr class="dashed"> </div> <div class="mb-4"> <h6 class=" text-uppercase">Dotted</h6> <!-- Dotted divider --> <hr class="dotted"> </div> <div class="mb-4"> <h6 class="text-uppercase">Solid</h6> <!-- Solid divider --> <hr class="solid"> </div> <div class="mb-4"> <h6 class=" text-uppercase">Text content</h6> <!-- Gradient divider --> <hr data-content="AND" class="hr-text"> </div> </div> </div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="2"> <pre><code><div class="dropdown"> <button data-toggle="dropdown"> Sample Button </button> <ul class="dropdown-menu"> <li>A</li> <li>B</li> <li class="dropdown-divider"></li> <li>C</li> </ul> </div> </code></pre> <p>这是 bootstrap 4 中水平分隔线的示例代码。<a href="https://i.stack.imgur.com/sgDUa.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3NnRFVhLnBuZw==" alt="Output looks like this:"/></a></p> <p>class="dropdown-divider" 在 bootstrap 4 中使用，而 class="divider" 在 bootstrap 3 中用于水平分隔线</p> </answer> <answer tick="false" vote="2"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <div class="form-group col-12"> <hr> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>我在我的项目中使用这个例子：</p> <p>html:</p> <pre><code> <hr class="my-3 dividerClass"/> </code></pre> <p>CSS：</p> <pre><code>.dividerClass{ border-top-color: #999 } </code></pre> </answer> <answer tick="false" vote="1"> <p>在 Bootstrap 5 中你可以这样做：</p> <pre><code><div class="py-2 my-1 text-center position-relative mx-2"> <div class="position-absolute w-100 top-50 start-50 translate-middle" style="z-index: 2"> <span class="d-inline-block bg-white px-2 text-muted">or</span> </div> <div class="position-absolute w-100 top-50 start-0 border-muted border-top"></div> </div> </code></pre> </answer> <answer tick="false" vote="1"> <p>这是我在 Express.js + Pug 中的做法：</p> <p><strong>CSS：</strong></p> <pre><code>.divider-text { position: relative; text-align: center; margin-top: 15px; margin-bottom: 15px; } .divider-text span { padding: 7px; font-size: 12px; position: relative; z-index: 2; } .divider-text:after { content: ""; position: absolute; width: 100%; border-bottom: 1px solid #ddd; top: 55%; left: 0; z-index: 1; } </code></pre> <p><strong>PUG代码：</strong></p> <pre><code>p.divider-text span.bg-light OR </code></pre> <p>然后编译成这个：</p> <p><strong>HTML：</strong></p> <pre><code><p class="divider-text"><span class="bg-light">OR</span></p> </code></pre> <p><strong>视觉效果：</strong></p> <p><a href="https://i.stack.imgur.com/q4QLC.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3E0UUxDLnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="0"> <p>引导程序 5.2</p> <pre><code><div class="vr"></div> </code></pre> </answer> </body></html>
这是我的代码，我想要实现的只是连续四列，并且不多于或少于此，但是目前，卡的数量范围从1-10，它们一直压缩到10。
嘿，我只有一个简单的Card Bootstrap 4组件。 This is my header This is my block
Bootstrap 4使用flex-box作为模态页脚。如果我想要两个按钮，一个在左边，一个在右边，我该如何让它正常工作？下面的代码尝试使用带有col-sm-6的div.row ...
我在bootstrap列中有这个结构：我想让你改成一个较低的分辨率，按如下方式排序：我在这里找到了如何用flexbox做的：Flexbox：重新排序和堆栈列但是我......
所以在Bootstrap v4中，我看到卡片组（http://v4-alpha.getbootstrap.com/components/card/#decks）有一个新功能，它可以制作一组卡片，其高度与最高等级相同。 ..
我正在使用Angular 4，Bootstrap 4并尝试实现固定的可滚动右div和固定的左div。它应该与Trulia非常相似。 Bootstrap删除了Affix jQuery插件...
我刚刚迁移到bootstrap 4，我的xs按钮似乎不再特别小！查看bootstrap 4中按钮的文档，我没有看到额外的小按钮选项？谁能确认......