Bootstrap 4 按钮的 CSS 在应用时不起作用，为什么？

Question

我刚刚开始创建我的第一个 Bootstrap 项目。但是，我的 Bootstrap 按钮的 CSS 不起作用。它没有被应用。我想知道为什么，因为它在过去有效。

我只想将按钮设置为绿色。这是我的按钮（我说的是蓝色的按钮）：

这是我的代码：

   button {

        padding-top: 200px;

        background-color: #388E3C;  

    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">

        <div class="row">

          <div class="col-lg-6" id="function2">

            <div class="input-group" id="input">

                <div class="custom-file">

                  <input type="file" class="custom-file-input" id="inputGroupFile01"

                    aria-describedby="inputGroupFileAddon01">

                  <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>

                </div>

            </div>

            <button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->

        </div>

  

    </div>

我使用填充来检查是否应用了任何内容。我感谢各种帮助。

Answer 1

你可以通过多种方式解决它使用button.btn {....}这个button {....}应该可以解决你的问题。使用selector按钮的类，然后分配属性（这就是我所做的）。#cssBtn {&nbsp; padding-top: 200px;&nbsp; background-color: #388E3C;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-lg-6" id="function2">&nbsp; &nbsp; &nbsp; <div class="input-group" id="input">&nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-file">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <button type="button" id="cssBtn" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>&nbsp; &nbsp; &nbsp; <!-- This is the button! -->&nbsp; &nbsp; </div>&nbsp; </div>

Answer 2

这绝对是一个特殊性问题您仅针对button元素，这不像类那么具体，这就是您的样式不适用并且被引导程序的类覆盖的原因。将您自己的类添加到按钮以应用您的样式，或者定位按钮 + 引导类。我建议不要使用!important，这并不是真的必要button.btn {&nbsp; padding-top: 200px;&nbsp; background-color: #388E3C;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-lg-6" id="function2">&nbsp; &nbsp; &nbsp; <div class="input-group" id="input">&nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-file">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>&nbsp; &nbsp; &nbsp; <!-- This is the button! -->&nbsp; &nbsp; </div>&nbsp; </div>

Answer 3

Boostrap 的 CSS 文件很可能会覆盖您的 CSS 文件，请确保在 Boostrap 文件之后加载 CSS 文件。您最好为按钮分配一个自定义类<button id="customButton" type="button" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>然后将你的 CSS 设置为button#customButton {padding-top: 200px;background-color: #388E3C;&nbsp;&nbsp;}

Answer 4

当我将您的确切 html 和 css 复制到环境中时，对我有用，我会说这是因为您已经在按钮上附加了很多类class="btn btn-primary btn-lg btn-block"您可能需要编辑其中一些类，因为它们可能优先于按钮本身最好的方法就是去做button {&nbsp; &nbsp; padding-top: 200px!important;&nbsp; &nbsp; background-color: #388E3C;&nbsp;&nbsp;}虽然重要不是最佳实践，但这会给你答案

Answer 5

如果您只需要绿色按钮，则添加btn btn-success而不是btn btn-primary<div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="col-lg-6" id="function2">&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group" id="input">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-file">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" class="custom-file-input" id="inputGroupFile01"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="inputGroupFileAddon01">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-file-label" for="inputGroupFile01">Choose your p12 file...</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-success btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->&nbsp; &nbsp; </div></div>