bootstrap样式丢失

最近在学习的过程中，遇见了一点小问题，组件的样式丢失了，没有理想的效果。

目录

一、错误情况

二、错误原因

三、 解决方法

四、解决情况

---

一、错误情况

理想的样式：像bootstrap官网给出的样例一样，如下。

实际上错误的样式：可以发现，按钮的样式丢失了，和官网的效果不一样。

以下的代码是错误情况时，项目中相关的部分。 

样式引入：

<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/clean-blog.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">

组件引入：

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="标题/作者/内容" aria-label="Search" name="query">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>

二、错误原因

引入了多个css文件，先引入的bootstrap，后引入的clean-blog。

两者中都有btn类，相当于是同样名字的人，叫错人了。

三、 解决方法

方法一：因为主要是使用bootstrap，所以最后引入bootstrap.css，保证叫到的类都是bootstrap里的。

方法二：方法一是一种偷懒的解决办法，因为对于需要使用clean-blog中样式的组件来说，也存在丢失的可能性。所以如果出现了样式丢失，可以在样式文件中查找类名，然后修改类名。

四、解决情况

采用简单的方法一，组件样式如下。

---

 Bootstrap是全球最受欢迎的前端组件库，用于响应式布局、移动设备优先的Web项目。利用Sass变量、大量mixin、响应式格栅系统、可扩展的预制组件以及基于jQuery的强大的插件系统，能够快速开发出应用原型或者构建整个APP。