Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。
使用 border 类可以添加或移除边框:
Bootstrap4 提供了一些类来设置边框颜色:
使用rounded 类可以添加圆角边框:
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:
我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:
使用 .mx-auto 类来设置居中对齐:
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
间距设置语法如下:
{property}{sides}-{size} // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)
breakpoints 指的是屏幕宽度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)。
property 代表属性，包含：
m - 用来设置 marginp - 用来设置 paddingsides 主要指方向：
t - 用来设置 margin-top 或 padding-topb - 用来设置 margin-bottom 或 padding-bottoml - 用来设置 margin-left 或 padding-leftr - 用来设置 margin-right 或 padding-rightx - 用来设置 *-left 和 *-righty - 用来设置 *-top 和 *-bottommargin 或 padding size 指的是边距的大小：
0 - 设置 margin 或 padding 为 01 - 设置 margin 或 padding 为 $spacer * .252 - 设置 margin 或 padding 为 $spacer * .53 - 设置 margin 或 padding 为 $spacer4 - 设置margin 或 padding 为 $spacer * 1.55 - 设置 margin 或 padding 为 $spacer * 3auto - 设置 margin 为 auto外边距 margin 可以设置负数，在数字前面添加字母 "n" :
n1 - 设置 margin 为 -.25rem (如果 font-size 为 16px 则为 -4px )n2 - 设置 margin 为 -.5rem (如果 font-size 为 16px 则为 -8px)n3 - 设置 margin 为 -1rem (如果 font-size 为 16px 则为 -16px)n4 - 设置 margin 为 -1.5rem (如果 font-size 为 16px 则为 -24px)n5 - 设置 margin 为 -3rem (如果 font-size 为 16px 则为 -48px)看下部分边距的源码设置：
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
.m-# / m-*-# |
设置所有边的外边距 | 尝试一下 |
.mt-# / mt-*-# |
margin top | 尝试一下 |
.mb-# / mb-*-# |
margin bottom | 尝试一下 |
.ml-# / ml-*-# |
margin left | 尝试一下 |
.mr-# / mr-*-# |
margin right | 尝试一下 |
.mx-# / mx-*-# |
margin left 与 right | 尝试一下 |
.my-# / my-*-# |
margin top 与 bottom | 尝试一下 |
.p-# / p-*-# |
使用边设置 padding | 尝试一下 |
.pt-# / pt-*-# |
padding top | 尝试一下 |
.pb-# / pb-*-# |
padding bottom | 尝试一下 |
.pl-# / pl-*-# |
padding left | 尝试一下 |
.pr-# / pr-*-# |
padding right | 尝试一下 |
.py-# / py-*-# |
padding top 与 bottom | 尝试一下 |
.px-# / px-*-# |
padding left 与 right | 尝试一下 |
我有一个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";我尝试了所有不同的路径格式，但它
我正在尝试消除使用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
我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo
我正在尝试安装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
gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好？ 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用，不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可，直到它在2014年被弃用并被下面的bootstrap-sass取代b
我正在尝试使用less.rb创建一个独立的应用程序(独立于RailsAssets管道)以基于TwitterBootstrap输出CSS文件。下面的结果是一个空文档parser=Less::Parser.new:paths=>[Rails.root+'/public/bootstraps/twitter-bootstrap-857b8fb/less']tree=parser.parse("@import'bootstrap.less'")tree.to_css这会导致返回一个空字符串。我尝试了将@import更改为完整路径等的变体，但没有成功。我想我一定遗漏了一些简单的东西。
编辑:如果可能的话，我更愿意使用Bootstrap来实现此功能，因为我的项目中有Bootstrap。似乎我可能只是缺少在我的rails项目中使用bootstrap的javascript的东西。单击列名时，表格应按该列名对数据进行排序。下表:我尝试按照显示的示例使用Bootstrap对数据进行排序atthiswebsite，但它对我不起作用。我错过了什么？我的Gemfile中的相关gem:#Gemfilegem'bootstrap-sass'gem'autoprefixer-rails'CSS:#app/assets/stylesheets/application.css.scss@im