Bootstrap5 通过 flex 类来控制页面的布局。
Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局，而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程
注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。
以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:
.flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：
.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:
.flex-fill 类强制设置各个弹性子元素的宽度是一样的:
.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :
提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :
.ms-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.me-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;:
弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。
如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
| 类 | 实例 | 实现 |
|---|---|---|
| 弹性容器 | ||
.d-*-flex |
根据不同的屏幕设备创建弹性盒子容器 | 尝试一下 |
.d-*-inline-flex |
根据不同的屏幕设备创建行内弹性盒子容器 | 尝试一下 |
| 方向 | ||
.flex-*-row |
根据不同的屏幕设备在水平方向显示弹性子元素 | 尝试一下 |
.flex-*-row-reverse |
根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐 | 尝试一下 |
.flex-*-column |
根据不同的屏幕设备在垂直方向显示弹性子元素 | 尝试一下 |
.flex-*-column-reverse |
根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反 | 尝试一下 |
| 内容对齐 | ||
.justify-content-*-start |
根据不同屏幕设备在开始位置显示弹性子元素 (左对齐) | 尝试一下 |
.justify-content-*-end |
根据不同屏幕设备在尾部显示弹性子元素 (右对齐) | 尝试一下 |
.justify-content-*-center |
根据不同屏幕设备在 flex 容器中居中显示子元素 | 尝试一下 |
.justify-content-*-between |
根据不同屏幕设备使用 "between" 显示弹性子元素 | 尝试一下 |
.justify-content-*-around |
根据不同屏幕设备使用 "around" 显示弹性子元素 | 尝试一下 |
| 等宽 | ||
.flex-*-fill |
根据不同的屏幕设备强制等宽 | 尝试一下 |
| 扩展 | ||
.flex-*-grow-0 |
不同的屏幕设备不设置扩展 | |
.flex-*-grow-1 |
不同的屏幕设备设置扩展 | |
| 收缩 | ||
.flex-*-shrink-0 |
不同的屏幕设备不设置收缩 | |
.flex-*-shrink-1 |
不同的屏幕设备设置收缩 | |
| 包裹 | ||
.flex-*-nowrap |
不同的屏幕设备不设置包裹元素 | 尝试一下 |
.flex-*-wrap |
不同的屏幕设备设置包裹元素 | 尝试一下 |
.flex-*-wrap-reverse |
不同的屏幕设备反转包裹元素 | 尝试一下 |
| 内容排列 | ||
.align-content-*-start |
根据不同屏幕设备在起始位置堆叠元素 | 尝试一下 |
.align-content-*-end |
根据不同屏幕设备在结束位置堆叠元素 | 尝试一下 |
.align-content-*-center |
根据不同屏幕设备在中间位置堆叠元素 | 尝试一下 |
.align-content-*-around |
根据不同屏幕设备，使用 "around" 堆叠元素 | 尝试一下 |
.align-content-*-stretch |
根据不同屏幕设备，通过伸展元素来堆叠 | 尝试一下 |
| 排序 | ||
.order-*-0-12 |
在小屏幕尺寸上修改排序 | 尝试一下 |
| 元素对齐 | ||
.align-items-*-start |
根据不同屏幕设备，让元素在头部显示在同一行。 | 尝试一下 |
.align-items-*-end |
根据不同屏幕设备，让元素在尾部显示在同一行。 | 尝试一下 |
.align-items-*-center |
根据不同屏幕设备，让元素在中间位置显示在同一行。 | 尝试一下 |
.align-items-*-baseline |
根据不同屏幕设备，让元素在基线上显示在同一行。 | 尝试一下 |
.align-items-*-stretch |
根据不同屏幕设备，让元素延展高度并显示在同一行。 | 尝试一下 |
| 单独一个子元素的对齐方式 | ||
.align-self-*-start |
据不同屏幕设备，让单独一个子元素显示在头部。 | 尝试一下 |
.align-self-*-end |
据不同屏幕设备，让单独一个子元素显示在尾部 | 尝试一下 |
.align-self-*-center |
据不同屏幕设备，让单独一个子元素显示在居中位置 | 尝试一下 |
.align-self-*-baseline |
据不同屏幕设备，让单独一个子元素显示在基线位置 | 尝试一下 |
.align-self-*-stretch |
据不同屏幕设备，延展一个单独子元素 | 尝试一下 |
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON
我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!
我正在开发一个简单的rubyonrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap
我想为网站的管理和公共(public)部分设置一对样式指南。每个都需要自己的布局，其中包含静态html和调用erbpartials的混合(因此静态页面不会削减它)。我不需要Controller来为这些页面提供服务，而且我不希望有效的仅开发内容使其余代码困惑。这让我想知道是否有一种方法可以直接呈现布局。免责声明:我明白这不是我应该经常/永远做的事情，而且我知道有很多争论可以解释为什么这是一个坏主意。我对这是否可能感兴趣。有没有办法让我直接从routes.rb渲染布局而不通过Controller？ 最佳答案 出于某种奇怪的原因，我想暂时
我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo
这个问题在这里已经有了答案:differentlayoutforsign_inactionindevise(8个答案)关闭7年前。如何更改设计Controller中的布局？
我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass，但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r
