Question

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
    <meta name="description" content="Lowa State University Library">
    <meta name="keywords" content="For a Web Design Assignment">
    <meta name="author" content="Tharuka Dananjaya">
    <link rel="stylesheet" href="./css/style.css">
    <!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->


</head>
    <body>
        <header>
            <div class="container">
                <div id="head_top">
                    <h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
            </div>
            <nav>
                <ul>
                    <li>
                        <li class="current"><a href="librarian_home.php">Home</a></li>
                    <div class="dropdown">
                        <button class="button_book">Books</button>
                        <div class="dropdown-content">
                          <a href="#">Link 1</a>
                          <a href="#">Link 2</a>
                          <a href="#">Link 3</a>
                          <a href="#">Link 4</a>
                          <a href="#">Link 5</a>
                        </div>
                    </div>
                        <!--<a href="loginindex.php">Login</a>
                        <a href="registerindex.php">Register</a>-->
                        <a href="student_info.php" class="ma">Student Info</a>


                </ul>
            </nav>
        </header>
        <section id="search_bar">
                <div class="container">
                    <form>
                        <input type="text" placeholder="Search">
                        <button type="search" class="button_1">search</button>

`我有外部CSS文件和Bootstrap。我已经在页面中链接了我的CSS样式，并且效果很好。因此，我尝试使用引导程序创建表。但是在页面中链接引导文件后，将更改每种样式。例如标头字体，应有尽有。因此，我该如何同时链接两种样式和我需要的两种样式。After Linking Bootstrap file

Answer 1

请首先添加引导样式，然后添加您的style.css。像

<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">

在头部的index.html文件中。

css的优先级是从下到上。

Answer 2

如果要在Bootstrap之前导入自定义样式；导入引导程序后，它将覆盖您可能在CSS文件中创建的类。

尝试在您自己的CSS之前导入引导程序，看看是否有区别。

目前没有任何代码，这就是我的全部帮助。

编辑

<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->

如我所见，您确实是在遵循自己的CSS规则后导入引导程序。这样，Bootstrap将覆盖CSS文件中的类。为了避免这种翻转，必须将这两个语句的顺序放在一起，以便您的CSS能够了解Bootstrap的状态。

<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">

此外，如果您没有在CSS中提供任何font-family属性，它将使用Bootstrap的默认属性。不要忘记覆盖所有必需的类和元素（body，p，div ...）。

有关如何在自己的Bootstrap实例中应用主题的更多信息，请参见here, in the official Bootstrap docs。

调试时的额外提示：检查开发人员环境中的网络请求中是否没有指向您自己的样式表链接的404，因为感觉您的样式无效，但实际上它们从未到达浏览器

Answer 3

<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">

编译器倾向于从第1行读取代码。如果将bootstrap.css放在style.css之后。肯定bootstrap.css将覆盖style.css。

Answer 4

嗨Tharuka Dananjaya，
  问题完全是由引导外部CSS造成的。
  该怎么解决？
  1.首先检查哪个部分在断裂并检查元素，您可以看到
     浏览器会使用boostrap css而不是您的样式。
     那么该怎么做，将该特定的CSS设置为！important
     例如：color：red！important;

将您的风格放在首位！
从style.css复制整个代码，然后粘贴到html页面中
作为内部css样式的方式，这意味着将其头部和主体置于黑白中。

当我链接引导程序时更改所有CSS样式

4 个答案:

编辑