Question

在Bootstrap 4.3.1中，样式在小屏幕上丢失。对于4.2.1。来说这不是问题。在宽度576像素或更小处，分隔带编码为无底边框的纯文本。定制的CSS是：

.divider-strip {
  min-height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
  border-bottom: 1px #607d8b solid;
}

.divider-strip h4 {
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: none;
}

.strip-block {
  width: 100px;
  height: 3px;
  background: #607d8b;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.block-title {
  width: 100%;
}

和html：

<div class="divider-strip block-title">
  <h4>Accordion 1</h4><span class="strip-block"></span></h4>
</div>

Answer 1

css中的Media标签用于允许您根据设备屏幕尺寸配置样式。例如：

body {
    background-color: red;
}

@media only screen and (max-width: 200px) {
  body {
    background-color: lightblue;
  }
}

当屏幕小于200px时，主体将为lightblue；当屏幕小于200px时，主体将为红色。看看jsfiddle中的这个例子。您几乎可以查看每个屏幕设备here，几乎每个CSS规则都有一个带有注释的代码。

您还可以使用!important覆盖引导CSS规则，该命令强制CSS使用您的代码，例如：

body {
    background-color: red!important;
}

要了解有关!important的更多信息，请查看here

Bootstrap 4.3.1的样式在小屏幕上丢失了

1 个答案: