css - 无法覆盖 Bootstrap

问题描述

首先，我在这里和通过谷歌研究了这个主题一整天，并尝试了我发现的所有内容，由于某种原因，我似乎仍然无法更改 Bootstrap 样式。我的自定义 css 确实可以工作，因为它的第一次修改在不需要覆盖任何东西的地方工作得很好（所以我在引导程序中使用的 input:hover 没有默认样式。）

这是一些代码：

.input-group-prepend.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}

注意这里的选择器必须和我试过的第 20 版一样。在这里，我无法更改输入字段在焦点时的行为方式。在谷歌上搜索了十几次之后，我尝试了一切，没有任何效果。我还使用 Chrome Inspect 来查找使用 box-shadow 的位置，并且在 Inspect 中我也可以CHANGE该属性产生了我想要的外观，但是在使用 css 选择器将该部分复制到我的 css 后，它不再起作用。还尝试调整选择器以使其更具体，计算“优先点”或它们被称为什至的任何东西，使用 ID 等，并将我的样式表链接放在 html 文件中的引导程序之后 - 没有变化（为了更好，那是）。这些都适用于这里、YouTube 和互联网上的任何地方的其他人，似乎我有同样的情况和解决方案，但对我来说，他们仍然没有。我正在考虑离开 bootstrap 并尝试从头开始构建一些东西，但我在 CSS 方面没有那么丰富的经验，而且我觉得如果是这样的话，我永远不想成为这样的人。[在此处输入图片描述][1]

更多代码：

button .btn-raised {
    box-shadow: 0 30px 0 0 #007299;
}

第二部分，当尝试为按钮设置 box-shadow 时，这是不可能的，即使我使用的 btn 或 btn-light 都没有对 box-shadow 做任何事情，Chrome Inspect 只是将“none”显示为这个属性的价值。（虽然我发现它涉及到一些转换，但我无法覆盖或禁用它。）同样，尝试了很多选择器变体。

更新：问题已解决，原来我遇到的所有问题都是因为我错过了在重新加载页面之前清除缓存 - 永远不要忘记！:)

标签： csstwitter-bootstrapoverriding

似乎对我来说工作正常。我认为您可能在 Bootstrap 之前加载您的 CSS，或者由于特殊性，您有其他样式覆盖了您的最新样式。

作为最后的手段，只是为了测试这个理论，你可以尝试在你的样式之后添加 !important。如果这可行，那么您知道这是选择器特异性的问题，但我不建议一般使用 !important 。

例如：

div {
    background-color: #000 !important;
}

button {
 	box-shadow: 2px 5px 1px 0 #007299;
}

.input-group-prepend {
  margin-top: 20px;
}

.input-group-prepend .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="btn btn-light">I am a button</button>

<div class="input-group-prepend">
	<input type="text" class="form-control">
</div>

css - 无法覆盖 Bootstrap

问题描述

解决方案

推荐阅读