Bootstrap Carousel 子元素不会显示响应式边距或填充答案

【问题标题】：Bootstrap Carousel children elements won't display responsive margin or paddingBootstrap Carousel 子元素不会显示响应式边距或填充
【发布时间】：2019-03-05 19:35:08
【问题描述】：

我想在 Bootstrap 的轮播中获取 carousel-caption 元素，以允许在标准 Bootstrap 断点（sm、md、lg、xl）处重新定位其中的元素。

目前，无论我在向 carousel-caption 元素或其任何子元素（例如 <h2> 或 <p> 元素）添加类（例如，pb-lg-5）时做什么，都只会有一个值使用。在所有四个断点上指定填充将不起作用。如果我将<h2> 元素的填充设置为“pb-sm-2 pb-md-4 pb-lg-5 pb-xl-1”，则只有一个值会起作用，其他值都不会正确显示.

以下是我的工作示例。

http://codepen.io/stripeycat/pen/WavdXQ

<div class="carousel-caption text-left">
   <div>
      <h2 class="mb-sm-1 mb-md-4 mb-lg-3 mb-xl-5">Headline Text</h2>
      <p>Paragraph Text</p>
   <div>
</div>

这是由于在轮播中定位导致的问题吗？还是我完全错过了什么？

【问题讨论】：

为什么不添加 sn-p codepen.io ？
好的，所以我不太明白这个 codepen 是如何工作的，但我已经在这个网站上添加了 HTML 和 CSS：codepen.io/stripeycat/pen/WavdXQ
1) 转到右上角的设置，添加引导 js 和 css 2) 标题 codepen 3) 添加 cmets 像 // 这不起作用？我已经预料到...
当然，我现在已经实施了这些步骤。非常感谢。

标签： twitter-bootstrap spacing

【解决方案1】：

1) 为什么 pb-xl-1 在 pb-sm-2 pb-md-4 pb-lg-5 pb-xl-1 中？ “对于最宽的屏幕 - 最小的填充”似乎不合逻辑；接下来你的样本同样不清楚“mb-sm-1 mb-md-4 mb-lg-3 mb-xl-5”，为什么不mb-md-3 mb-lg-4？

2) 应该只使用序列中的一个填充值，这是设计使然，取决于屏幕大小；这对于像pb-sm-2 pb-md-3 pb-lg-4 pb-xl-5 -https://codepen.io/rpokrovskij/pen/NOqzEX 这样的自然生长序列来说非常明显，填充会随着屏幕大小的调整而变化。

3) 据我了解您的情况 - 这与轮播无关

【讨论】：

间距不一致，因为我将在四个不同的断点上使用不同的图像。这意味着它在 sm、md、lg 和 xl 上会有很大不同（它不会随着尺寸的增加而增长）。我遇到的问题是我需要为 xl 设置一个较高的值，以将最大（宽屏）断点的轮播标题推高，但我想为最小（sm）使用更少的填充，否则标题是在移动设备上一直卡在轮播顶部。
你写道““我需要为 xl 设置一个较高的值。但我想为最小的 (sm) 使用更少的填充”。我的 codepen 就像你说的那样工作，不是是吗？
如果没有 - 将您的图像添加到您的 codepen' caroiusel 以展示这些卡纸。 Copdepen 应该足以解决这个问题。
我认为我需要在此处添加实际的轮播以更好地指示我所看到的行为，我不认为我在这里生成的内容提供了我需要的解释。

【解决方案2】：

我已经隔离了问题；当我在我的额外自定义 CSS 文档中编写额外的 Bootstrap 样式 Spacing 类时，我相信这些与级联相关的引用没有正确。

在将这些直接重写到引导样式表中（遵循现有 CSS 的确切形式）后，浏览器现在可以正确地吸引我的其他样式。

【讨论】：