在没有Sass的情况下更改Bootstrap 4间隔
，可以通过自定义CSS样式来实现。
首先，Bootstrap 4提供了一些预定义的间隔类，如mt-1、mb-2等，用于设置元素的上下间隔。如果需要更改这些间隔，可以通过自定义CSS样式来覆盖默认的间隔值。
以下是一种可能的解决方案：
- 打开你的HTML文件，并在
<head>标签内添加一个<style>标签，用于定义自定义样式。
<head>
<style>
/* 自定义间隔样式 */
.custom-margin-top {
margin-top: 20px; /* 设置自定义的上间隔值 */
}
.custom-margin-bottom {
margin-bottom: 30px; /* 设置自定义的下间隔值 */
}
</style>
</head>- 在需要更改间隔的元素上，添加自定义的类名。
<div class="mt-1 custom-margin-top">
<!-- 元素内容 -->
</div>
<div class="mb-2 custom-margin-bottom">
<!-- 元素内容 -->
</div>在上述示例中，我们使用了mt-1和mb-2类来设置默认的上下间隔，并通过custom-margin-top和custom-margin-bottom类来应用自定义的间隔值。
需要注意的是，这种方法只适用于更改Bootstrap 4的间隔，如果需要更改其他样式或组件，可能需要进一步的自定义。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云内容分发网络（CDN）。
相关·内容
1回答
这个是可能的吗？我确实在下面的帖子中找到了答案：Bootstrap change $grid-gutter-width 然后...and将这段代码添加到我的CSS中： /* .row { padding-right: 20px; } */ 但我最终在我的网站上看到了一个水平
浏览 9提问于2020-11-25得票数 1
回答已采纳
1回答
关闭链路悬停
、、、
我正在与Bootstrap和Bootstrap SASS装载机合作。我正在定义一个_bootstrap-customizations.scss文件，它允许我在不改变其核心文件的情况下覆盖BS默认变量。我想对所有没有a元素的
我想把a:hovereffects 关掉 completely
浏览 3提问于2015-04-30得票数 0
4回答
我用npm在我的laravel应用程序上安装了引导程序4。但我认为引导3背后工作，而不是引导4。npm installnpm安装引导程序@4.0.0-字母6
我有留下什么事做吗？还是需要手动将引导程序导入资产/sass/app.scss文件或其他？
浏览 6提问于2017-02-24得票数 12
回答已采纳
我已经在bootstrap中创建了一个新的间隔大小，整个项目都在使用它。由于该值相当大，我希望能够对其进行设置，以便在较小的设备上该值较小，并减少所有空间。我知道我可以使用不同的断点类在较小的设备上更改为较小的间隔符，但我有太多的地方需要更改，我希望我可以在SASS/CSS中进行更改。我的</
浏览 21提问于2020-09-24得票数 0
1回答
Bootstrap 4提供了一组间隔类，所有这些类都使用$spacer SASS变量。https://getbootstrap.com/docs/4.1/utilities/spacing/ 有没有任何混入，以便在不能-或不想要-修改html并添加相关类的情况下将这些间距应用于元素？因此，对于没有$spacer -classes的元素，可以根据bootstr
浏览 11提问于2018-12-23得票数 0
我想知道如何在自定义类中使用Bootsrap来获得通用的间隔变量。 我有一个类.box，我想要应用bootstrap 4的类pl-3。我不想在HTML中添加内联的类，而是想在sass中设置它的样式。 我想使用Bootstap的间隔变量，而不是在类本身中硬编码。因此，如果我想在将来更改填充，我只需更改sass中的填充。$space
浏览 31提问于2019-12-30得票数 0
回答已采纳
在Gemfile中，我有：我现在已将其更改为以下内容，这是撰写本文时的最新版本：查看一下和上的RubyGems.org，我发现这两个版本的运行时依赖关系为：
sass ~> 3.
浏览 3提问于2014-05-27得票数 0
回答已采纳
1回答
我通过NPM使用Bootstrap 4，并将其导入我的主SASS文件中。在导入之前，我声明：$grid-gutter-width: 26px !default;
然后导入bootstrap包。最近我一直在尝试使用bootstrap CDN，并从我的SASS文件中删除导入，但我正在努力的是像以前一样设置和覆盖网格间距宽度。CDN在结束</body>标记之前被引用
浏览 12提问于2021-02-23得票数 0
3回答
我是Jekyll的新手，我想引入一些Twitter Bootstrap功能。有没有人这样做过，如果有，你有什么建议吗？我会选择Jekyll-Bootstrap，但不再支持它。我已经建立了我的Jekyll网站，我希望有一种方法来拉在Bootstrap。
浏览 2提问于2015-02-26得票数 29
回答已采纳
4回答
我想创建一个基于Bootstrap的网站主题。我想扩展Bootstrap的默认组件，并更改其中一些组件。为此，我需要访问引导程序定义的SASS变量，这样我就可以重写它们。我想从GitHub中克隆引导带并直接改变它，但我听说这实际上不是一个好的实践。你能给我一些建议吗？
浏览 3提问于2017-08-19得票数 27
回答已采纳
1回答
如果我更改字符串
gulp.src('external/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss你能给我解释一下为什么在第一种情况下我们在dest文件夹中没有很多文件夹，而在第二种情况下，dest文件夹中有很多文件夹，你能给我解释一下在哪里阅读吗？如果我理解正确的话，
浏览 0提问于2015-04-28得票数 1
当我在index.html中添加Bootstrap URL时，我的菜单项往往会消失，可能是它们的颜色已经改变。下面是添加URL之前home.html上的菜单图片：一旦我在index.html中添加了这行代码，菜单就变成空白
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
浏览 2提问于2018-03-09得票数 1
1回答
我一个接一个地执行了"“链接中的步骤，没有发现任何错误。但是，没有出现步骤6中提到的/laravel/public/js/app.js和/laravel/public/js/app.css文件。我的webpack.mix.js文件内容： |----------------------------------
浏览 1提问于2020-05-04得票数 1
回答已采纳
Running "clean:server" (clean) task
Warning: /Users/Filthy/Documents/gucci/app/styles/main.scss:4: error: file to imp
浏览 0提问于2014-05-07得票数 1
我正在尝试创建一个新项目，我正在使用这里的gulpfile.ja代码 const gulp = require('gulp');const sass = require('gulp-sass');
gulp.task('sass', function(){
浏览 12提问于2019-01-14得票数 0
回答已采纳
我想这可能是Dokku的事情(来自heroku，它的工作地点)，所以我尝试在本地运行rake assets:precompile，这样我就可以把它推到回购系统上，然后再推到Dokku。在本地获得相同的错误Sprockets::FileNotFound: couldn't find file 'bootstrap'production.rb
config.serve_static_assetsconfig.as
浏览 0提问于2014-10-03得票数 1
回答已采纳
我对编程比较陌生，因此我希望这个问题不是绝对愚蠢的。我尝试使用bootstrap。我构建了一个名为"custom.css.scss“的文件，并在其中使用了"@import "bootstrap"”行。问题是:每次我保存"custom.css.scss“文件时，都会自动生成一个新文件"custom.css”，并收到以下消息：“未找到或无法读取要导入的custom.css.
浏览 0提问于2013-01-11得票数 14
我正在学习一个教程，通过使用节点包管理和sass来设置我的引导程序4环境。然后，我在gem install sass中安装了Ruby，因此它使我能够运行SASS main.scss main.css，将引导文件转换为可以链接到html文件的css文件。我检查了google中的代码，它似乎正在读取代码，但不知道为什么引导程序在这种情况下不起作用，因为您可以看到表单根本没有样式。现在很困惑。当css文件是由
浏览 0提问于2019-01-28得票数 0
我要做的是：在app.scss中在控制台上写着：
jQuery.Deferred异常：$(...).selectpic
浏览 1提问于2018-02-21得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
