Question

我正在尝试学习Bootstrap，并希望通过自己构建此站点来进行练习： https://konect.co.za/

我在覆盖Bootstrap和添加自定义字体方面遇到了严重的麻烦。要添加我的自定义Google字体，我已经尝试过了，但是没有用；

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

和css

html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}

这是我无法设置样式的img；

    <section class="container">
    <img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
    </section>

样式；

section img .profile-pic{
margin-left:150px;

}

Answer 1

尝试添加正文

 body {
  font-family: 'Roboto', sans-serif !important;
}

html样式将应用于所有文档，但是优先级非常低。它仅在除非体内没有指定样式的情况下才起作用。但是在您的情况下，bootstrap在body标签中添加了自己的样式。

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

这就是为什么您的样式不起作用

Answer 2

您需要在自定义CSS样式中添加“！important”，以覆盖所有引导样式。另外，CSS始终会使用最特定的样式来设置元素的样式，因此，如果将样式放在html {}中，它将被p {} h1 {}等覆盖。请记住，样式表是级联的，因此顶部的任何样式都会通过在下面设置相同元素的样式来覆盖。

Answer 3

您需要在自定义CSS样式中添加“！important”，以覆盖引导CSS。

如果您使用的是外部自定义css文件，则比引导css文件导入后还要多。

有关更多信息，请参见下面的示例。

<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<style>
  html{
    font-family:"Roboto", "Arial" !important;
    font-size:20px !important;
    font-weight:300; !important;
  }

  .h1-override{
      font-size:12px !important;
  }
</style>

<body>
    <div> testing bootstrap overriding </div>
    <h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>

 <h1 class="text-center text-uppercase">without custom style</h1>
</body>

</html>

使用我的外部样式表覆盖Bootstrap

3 个答案: