内联 CSS 不适用于 Bootstrap 类答案

【问题标题】：Inline CSS is not working with Bootstrap classes内联 CSS 不适用于 Bootstrap 类
【发布时间】：2021-08-11 12:50:39
【问题描述】：

我是一个初学者，我正在开发一个网页。我对网页的想法是，如果我点击 login 按钮，#login-box 将消失，而另一个 (.dashboard) 将出现。我已将display: none 添加到.dashboard 类中，以首先隐藏。然后我做了一些 JavaScript 代码来隐藏 #login-box 并将 display: block 添加到 .dashboard 类，如果我点击 login 按钮。

我的代码：

const loginBoxEl = document.getElementById("login-box");
const loginBtnEl = document.getElementById("login-btn");
const dashboardEl = document.getElementById("dashboard");

loginBtnEl.addEventListener("click", function() {
    loginBoxEl.style.display = "none";
    dashboardEl.style.display = "block";
});

#login-box {
    height: 100vh;
}

#login-area {
    border-radius: 8px;
    box-shadow: 5px 5px 10px lightgray;
}

#dashboard {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payoneer Bank Account | Dabananda Mitra</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <!-- Login Box -->
    <div class="d-flex justify-content-center align-items-center" id="login-box">
        <div class="p-5" id="login-area">
            <h1 class="bank-title">Welcome to Payoneer</h1>
            <input class="form-control my-3" type="email" placeholder="E-mail" required>
            <input class="form-control my-3" type="password" placeholder="Password" required>
            <button class="btn btn-success" type="submit" id="login-btn">Log in</button>
        </div>
    </div>

    <!-- Dashboard -->
    <div id="dashboard">
        <h1>Dashboard</h1>
    </div>

    <!-- Bootstrap JavaScript CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <!-- Custom JavaScript -->
    <script src="./main.js"></script>
</body>
</html>

当我点击 login 按钮时，.dashboard 类变为 display: block，但 #login-box 并没有消失，display: none 添加为内联 CSS。

我该如何解决这个问题？

【问题讨论】：

因为，出于某种原因，bootstrap 将!important 添加到display 属性：.d-flex { display: flex!important; }
那有什么解决办法呢？如何使用 JavaScript 添加display: none !important 或者有什么更好的方法？
stackoverflow.com/questions/462537/overriding-important-style
非常感谢。

标签： javascript html css twitter-bootstrap

【解决方案1】：

const loginBoxEl = document.getElementById("login-box");
    const loginBtnEl = document.getElementById("login-btn");
    const dashboardEl = document.getElementById("dashboard");

    loginBtnEl.addEventListener("click", function() {
    loginBoxEl.classList.add("hide_login");;
    dashboardEl.style.display = "block";
    });

#login-box {
    height: 100vh;
}

#login-area {
    border-radius: 8px;
    box-shadow: 5px 5px 10px lightgray;
}

#dashboard {
    display: none;
}
.hide_login{
  display: none!important;
}

<div class="d-flex justify-content-center align-items-center" id="login-box">
  <div class="p-5" id="login-area">
      <h1 class="bank-title">Welcome to Payoneer</h1>
      <input class="form-control my-3" type="email" placeholder="E-mail" required>
      <input class="form-control my-3" type="password" placeholder="Password" required>
      <button class="btn btn-success" type="submit" id="login-btn">Log in</button>
  </div>
</div>

<!-- Dashboard -->
<div id="dashboard">
  <h1>Dashboard</h1>
</div>

【讨论】：

希望！这会有所帮助。
你的回答太简单易懂了。非常感谢。

【解决方案2】：

请看这个，我用的是jQuery，相应地改变了点击事件。

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#login-btn",function() {
        $('#login-box').removeClass('d-flex');
        $('#login-box').css('display','none');
        $('#dashboard').css('display','block');
    });
    
});

#login-box {
    height: 100vh;
}

#login-area {
    border-radius: 8px;
    box-shadow: 5px 5px 10px lightgray;
}

#dashboard {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payoneer Bank Account | Dabananda Mitra</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Custom CSS -->
</head>
<body>
    <!-- Login Box -->
    <div class="d-flex justify-content-center align-items-center" id="login-box">
        <div class="p-5" id="login-area">
            <h1 class="bank-title">Welcome to Payoneer</h1>
            <input class="form-control my-3" type="email" placeholder="E-mail" required>
            <input class="form-control my-3" type="password" placeholder="Password" required>
            <button class="btn btn-success" type="submit" id="login-btn">Log in</button>
        </div>
    </div>

    <!-- Dashboard -->
    <div id="dashboard">
        <h1>Dashboard</h1>
    </div>

    <!-- Bootstrap JavaScript CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>
</html>

【讨论】：