Question

尽管在其他问题中发现了以下说明，但我似乎无法覆盖Bootstrap的CSS。

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">        
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
        ...
<!-- GRID SECTION -->
<div class="container">
    <div class="row">
       <div class="col-md-2">   
       </div>
       <div class="col-md-8">
       <h1 id="title">TITLE</h1>    
       </div>
       <div class="col-md-2">               
       </div>
    </div>
</div>

它的CSS：

@font-face {
    font-family: hnl;
    src: url('fonts/hnl.otf'); 
}

body {
    font-family: hnl;
}

#title {
    font-family: hnl;
    text-align: center; 
}

但是，字体不会更改，并且文本不对齐。如何覆盖Bootstrap的CSS？

Answer 1

您尚未将代码置于真实结构中。就像你可以看到这段代码一样：

@font-face {
    font-family: hnl;
    src: url('fonts/hnl.otf'); 
}

body {
    font-family: hnl;
}

#title {
    font-family: hnl;
    text-align: center; 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">        
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
  <title>Document</title>
</head>
<body>
<!-- GRID SECTION -->
<div class="container">
    <div class="row">
       <div class="col-md-2">   
       </div>
       <div class="col-md-8">
       <h1 id="title">TITLE</h1>    
       </div>
       <div class="col-md-2">               
       </div>
    </div>
</div>
</body>
</html>

覆盖Bootstrap的CSS

1 个答案: