Question

我一直在寻找一个我面临的奇怪问题。我正在使用bootstrap 4作为wordpress的主题，并且必须进行两次CSS调用才能进行更改。如果我将其改回1个班级通话，将无法使用。有人知道这个问题吗？

这是我的代码：

<title>Theme</title>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<?php wp_head(); ?>

</head>

<body>


<nav class="navbar navbar-expand-lg navbar-light bg-light px-5 mt-0">
  <nav class="navbar navbar-light bg-light">
    <div class="d-flex flex-grow-1">
                <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>

  <a class="navbar-brand d-none d-lg-inline-block" href="#">
    <img src="<?php echo get_bloginfo("template_directory"); ?>/assets/logo.png" width="173" height="40" alt="Joint Academy" />
  </a>
</nav>
 <div class="w-auto text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

  <div class="collapse navbar-collapse flex-grow-1 text-right " id="myNavbar" >
        <ul class="navbar-nav ml-auto flex-nowrap  ">
      <li class="nav-item active px-3 ">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">link1</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">link2</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">link3</a>
      </li>
      <button type="button" class="btn btn-default btn-outline-dark px-4 py-1">Log In</button>


    </ul>
  </div>
</nav>

和CSS ...

.jumbotron {
    width: 400px;
}
.jumbotron {
    width: 400px;
}

如果我删除了一个巨型飞镖，将无法正常工作

Answer 1

使用!important标记覆盖属性

.jumbotron {
    width: 400px !important;
}

引导程序无法正确覆盖CSS

1 个答案: