Question

当我包含css / bootstrap.min.css时，它会覆盖网站的某些元素，例如'a'标签，我的.nav条和网站上使用的字体。加载顺序：

<link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="custom.css">
    <link rel = "stylesheet" href = "styl.css" type = "text/css" />
    <link href="css/fontello.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,600&display=swap&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

html：

<div class="wrppr">
        <div class="header">
            <div class="logo">
                <img src="LOGO.png" style="vertical-align:middle;height: 250px; width: 250px; float: left">
                <span style="vertical-align:middle;"></br>Voodoo Doll Ink Studio</span>
                <div style="clear:both"></div>
            </div>
        </div>
        <div class="nav">
            <ul>
                list here
        </div>
        <div class="image">
            <img src="tatofront.jpg" style="opacity: 0.6"/>
        </div>

        <div id="opis">
        <p></p>
        </div>
        <div style="clear:both"></div>

        <div id="option2">
            <a href="#">
                <div id="ig">
                    <i class="icon-instagram"></i>
                </div>
                <div class="txt">Sprawdź naszego Instagrama!</div>
        </a>

    <script src="https://snapwidget.com/js/snapwidget.js"></script>
    <iframe src="https://snapwidget.com/embed/786091" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden;  width:100%; "></iframe>
        </div>
        <div style="clear:both"></div>
            <div id ="option3">
                <div class="logobot">
                    <img src="duda.jpg" style="height: 300px; width: 300px;">
                </div>
                Tu opis o pierciengu i cennik
            </div>
        <div style="clear:both"></div>
        <div id ="option4">
                <div class="logobot">
                    <img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
                </div>
                Tu opis o dreadach i dreadlockach
            </div>
        <div id="option5">  
            <div class="logobot">
                <img src="LOGO.png" style="height: 300px; width: 300px;">
        </div>
        <div style="clear:both"></div>
        <div class="footer">
            VOODOO DOLL INK
        </div>

    </div>

大多数情况都很好，尽管很少有内容被覆盖：标签未编辑徽标会更改文本对齐方式，导航中的文字变低且不居中 custom.css中的bootstrap.min.css覆盖的元素：

a { 
  color: white; 
  text-decoration: none; 
  display: block; 
}
.logo
{
    font-weight: bold;
    vertical-align:middle;
    width: 1000px;
    font-size: 72px;
    text-align: middle;
    margin-left:auto;
    margin-right:auto;
}
.nav
{
    padding: 10px;
    width:auto;
    border-top: 1px solid rgb(38, 38, 38);
    border-bottom: 1px solid rgb(38, 38, 38);
    top: 0px;
    z-index: 100;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    text-align: center;
    background-color:#0a0a0a;
}

这是我第一次制作响应式网站||使用引导程序。

Answer 1

如果您的CSS文件位于public / css中，则应输入：

<link rel="stylesheet" href="css/custom.css">

编写href时，起始文件夹为public。进一步了解here。

此外，您在第三行缺少e：

<link rel="stylesheet" href="styl.css">-> <link rel="stylesheet" href="style.css">

Custom.css不会覆盖bootstrap.min.css

1 个答案: