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

你可以通过多种方式解决它

1. 使用button.btn {....}这个button {....}应该可以解决你的问题。

2. 使用selector按钮的类，然后分配属性（这就是我所做的）。

#cssBtn {

  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" id="cssBtn" class="btn btn-primary btn-lg btn-block">Convert p12 to jks</button>

      <!-- This is the button! -->

    </div>

  </div>

Answer 2

这绝对是一个特殊性问题

您仅针对button元素，这不像类那么具体，这就是您的样式不适用并且被引导程序的类覆盖的原因。

将您自己的类添加到按钮以应用您的样式，或者定位按钮 + 引导类。

我建议不要使用!important，这并不是真的必要

button.btn {

  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 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;  

}

Answer 4

当我将您的确切 html 和 css 复制到环境中时，对我有用，我会说这是因为您已经在按钮上附加了很多类

class="btn btn-primary btn-lg btn-block"

您可能需要编辑其中一些类，因为它们可能优先于按钮本身

最好的方法就是去做

button {

    padding-top: 200px!important;

    background-color: #388E3C;  

}

虽然重要不是最佳实践，但这会给你答案

Answer 5

如果您只需要绿色按钮，则添加btn btn-success而不是btn btn-primary

<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-success btn-lg btn-block">Convert p12 to jks</button> <!-- This is the button! -->

    </div>

</div>