Bootstrap 4中有空格混入吗？

Bootstrap 4 是一个流行的前端框架，用于快速构建响应式网页设计。在 Bootstrap 4 中，确实存在一些用于创建空格的实用工具类，这些类可以帮助开发者轻松地在布局中添加间距。

基础概念

Bootstrap 4 提供了一套间距工具类，这些类允许你在元素的 margin 和 padding 上应用预定义的值。这些类遵循一个简单的命名规则，例如 <方向><设备尺寸>-<数量>。

类型与应用场景

Bootstrap 4 的间距类主要分为两类：margin 和 padding。

Margin 类

m 代表 margin
t, b, l, r, x, y 分别代表 top, bottom, left, right, x轴（左右）, y轴（上下）
0 到 5 代表不同的间距大小

例如：

.mt-3 表示给元素顶部添加中等间距。
.mb-0 表示移除元素底部的间距。
.mx-auto 表示水平居中元素。

Padding 类

p 代表 padding
其他规则与 margin 类相同。

例如：

.pt-2 表示给元素顶部添加小间距。
.pb-4 表示给元素底部添加较大间距。

遇到的问题及解决方法

如果你在使用 Bootstrap 4 的间距类时遇到问题，比如间距没有按预期显示，可能是以下几个原因：

未正确引入 Bootstrap CSS：确保你已经在项目中正确引入了 Bootstrap 的 CSS 文件。
未正确引入 Bootstrap CSS：确保你已经在项目中正确引入了 Bootstrap 的 CSS 文件。
CSS 冲突：可能有其他的 CSS 规则覆盖了 Bootstrap 的间距设置。检查浏览器的开发者工具，查看元素的最终样式。
错误的类名：检查是否使用了正确的类名，没有拼写错误。
父元素的影响：有时候父元素的某些样式（如 overflow: hidden）可能会影响子元素的间距显示。

示例代码

以下是一个简单的 HTML 示例，展示了如何使用 Bootstrap 4 的间距类：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Spacing Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <h1>标题</h1>
    <p class="mb-4">这是一段文本。</p>
    <button class="btn btn-primary mx-auto d-block">按钮</button>
  </div>
</body>
</html>

在这个例子中，mt-5 给容器添加了顶部的大间距，mb-4 给段落添加了底部的中等间距，而 mx-auto d-block 则使按钮在其父容器中水平居中。

通过以上信息，你应该能够理解 Bootstrap 4 中的空格混入概念，并能够在实际开发中有效地使用它们。

Bootstrap 4中有空格混入吗？

、、

Bootstrap 4提供了一组间隔类，所有这些类都使用$spacer SASS变量。https://getbootstrap.com/docs/4.1/utilities/spacing/ 有没有任何混入，以便在不能-或不想要-修改html并添加相关类的情况下将这些间距应用于元素？因此，对于没有$spacer -classes的元素，可以根据bootstrap-classes值来设置间距，例如，类似于 .myClass { @include

浏览 11提问于2018-12-23得票数 0

1回答

在ruby cmd中将scss转换为css，以便编写sass代码。

Errno::ENOENT:没有这样的文件或目录@ rb_sysopen - D:\Tasks\Bootstrap使用--trace进行回溯。在我用ruby cmd写完这个命令之后： sass D:\Tasks\Bootstrap 4\css\style.scss D:\Tasks\Bootstrap 4\compiledcss\style.css

浏览 18提问于2019-09-11得票数 0

1回答

Bootstrap仅适用于混合/占位符-具有语义类

、、、

我正在考虑只在HTML中使用语义类，同时在语义类中仍然使用Bootstrap的类样式。例如：.newsItem {}.newsItem {} 这是完全可能的吗？你认为有什么理由不推荐这样做吗？谢谢。

浏览 0提问于2013-05-13得票数 4

回答已采纳

1回答

你把响应式混入放在Bootstrap 4SCSS的什么地方？

、、、

你把响应式混入放在Bootstrap 4的什么地方？我在_custom.scss和mixins.scss中尝试了SCSS，但des不起作用。我正在使用Bootstrap 4提供的mixins， .some-class { } }

浏览 0提问于2017-09-17得票数 0

2回答

在Rails应用程序中自定义Bootstrap 4媒体查询

、

我想自定义Bootstrap 4介质查询(添加新的xxl介质查询)。我已经使用了Bootstrap的gem安装。问题似乎在于Bootstrap没有使用新的媒体查询，我不知道如何在样式表中显式地包含Bootstrap文件(以使用Bootstrap混入和函数)。Bootstrap的安装位于 /Users/myname/.rvm/gems

浏览 3提问于2017-12-01得票数 1

2回答

引导选项卡:在选项卡之间有未知的空间

、

none; padding: 8px 16px;}制表符之间有空格我想移除标签之间的空格。让我们假设我的css和HTML没有变化。我可以添加哪些额外的CSS来删除选项卡之间的空间？

浏览 4提问于2013-09-30得票数 1

回答已采纳

1回答

Bootstrap 4 Webpack Sass函数不工作

、、、

对Webpack和Bootstrap 4的混入和函数有问题。 sass|css加载器： {@import "bootstrap/scss/reboot";@import "bootstrap/scss/images&quo

浏览 14提问于2019-01-15得票数 0

回答已采纳

1回答

缺少Twitter Bootstrap witih Saas MakeFluidColumn混入-尝试不将范围硬编码到HTML中的类中

、、

我使用的是Thomas Macdonald的sass版本的bootstrap (bootstrap-sass)这适用于固定栅格，但不适用于流体栅格。Macdonald在StackOverflow上用他创建的名为makeFluidColumn 的混搭回答了这个问题但它不再包含在

浏览 0提问于2013-01-09得票数 0

回答已采纳

4回答

更改Bootstrap SASS边界-半径(和其他混合)- Rails

、、

我正在使用rails gem Bootstrap SASS，我想知道如何覆盖一些混入。具体地说，边界半径等。我想我可以简单地覆盖它，如下所示：@import "bootstrap-responsive"; @mixin border-radius($radius有什么想法吗？

浏览 0提问于2012-04-11得票数 3

回答已采纳

1回答

使用Bootstrap + LESS Mixins的语义网格如何？

、、、、

Twitter bootstrap文档讨论了三个用于生成网格系统的混合：#grid > .core();我知道如何设置页面使用bootstrap和更少...但是我不知道如何在语义上使用网格系统。文档说明了要使用什么混入，但没有说明如何使用...有人能解释一下如何使用它们来创建语义网格吗？只是为了弄清楚或看看它是如何工作的:S 谢谢你!！

浏览 0提问于2012-03-28得票数 9

回答已采纳

1回答

我能把它们加回去吗？

、、、、

能把它们加回去吗？see: http://zfsonlinux.org/msg/ZFS-8000-4J wwn-0x5000c500858211b3 ONLINE 0 0 0# 2 Reserved(7) Complete

浏览 0提问于2019-11-08得票数 3

1回答

如何在我自己的自定义SASS类中混入Twitter Bootstrap实用程序类？

、、

我有一个用SASS编写的自定义类： .my-custom-container { padding: 1.5rem; background-color: red;} 这个是可能的吗？

浏览 27提问于2019-10-13得票数 1

1回答

bootstrap4媒体查询混入不起作用

、、

我在使用媒体查询断点的混入时遇到了问题。

浏览 5提问于2017-01-22得票数 1

2回答

仅当值除空白外不包含其他字符时才使用字符串替换

、

实际上，在字符串包含多个空格的情况下，对其进行裁剪是很棘手的。我已经完成了大部分工作，但唯一的问题是，现在我的“好”字符串值也删除了它的空格，因此两个单词被混入一个单词。const goalNotes = [ "goal": { "value": " ", "guid": "4a0c6410, &q

浏览 6提问于2021-06-03得票数 1

回答已采纳

1回答

symfony encore上的全局引导混合

、、、、

我开始了一个小的symfony项目，其中我在app.css上加载bootstrap。在app.css上我还有另一个include "navigation.scss“，在上面我使用了bootstrap混合和它包含在基本布局模板中。问题是，如果我在webpack.config.js中创建另一个入口点，将css文件添加到扩展布局的第二个模板中，bootstrap将起作用，但我无法从bootstrap访问混合函数，唯一的解决方案是在css文件中也导入bootstrap，但随后我在两个css文件中都有两个

浏览 0提问于2020-06-04得票数 0

3回答

在NuxtJS中使用Bootstrap 4

、、、

我试图将bootstrap 4 (bootstrap-vue)与Nuxt关联起来。*//* ** Nuxt.js modulesmodules: [ // Doc: https://bootstrap-vue.js.org&#

浏览 0提问于2019-08-23得票数 5

回答已采纳

3回答

Bootstrap 4卡:删除空格

、、

浏览 74提问于2019-07-04得票数 1

回答已采纳

3回答

如何修复IndentationError:取消缩进与任何外部缩进级别都不匹配

、、

我收到此错误文件"ad.py"，第132行：^ IndentationError: unindent不匹配任何外部缩进级别 print("ACCOUNT WAS BANIDA!") except UserChannelsTooMuchError:

浏览 0提问于2019-09-06得票数 0

3回答

Mixin和.net

、

什么是，确切的混入？在c#中有什么技术可以做到这一点吗？

浏览 0提问于2010-08-04得票数 7

回答已采纳

1回答

@include makeColumn()引导混合不起作用

、、、、

问题我正在使用Ruby on Rails构建一个应用程序，在bootstrap-sass gem中尝试使用混入时遇到了很大的问题。当我使用我定义的类时，我没有得到与在Bootstrap中只使用.span类相同的样式。我已经找遍了互联网，也找不出哪里出了问题。我猜这是很明显的东西，我只是没有看到，因为我已经盯着屏幕太长时间了。</div> <

浏览 0提问于2013-02-24得票数 2

回答已采纳

点击加载更多