CSS Bootstrap会覆盖我自己的CSS

Question

我正在尝试在我的网站（ASPNET WebForms）中创建一个拆分按钮。到目前为止，我唯一喜欢的拆分按钮实现是Bootstrap的实现。我没有使用他们框架的任何其他功能。但是，一旦我插入：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

我自己的CSS很烂。我试图仅隔离我需要splitbutton的类，但我无法成功完成。

这是我的带有所需类的splitbutton的html代码

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

有人知道隔离欲望等级的方法吗？还是可以让我指出与该跨浏览器相似的splitbutton的另一种实现？我在Google上搜索了很多，但发现的唯一可用的是bootstrap。

Answer 1

良好的经验法则。始终将样式表与您想成为最权威的规则放在一起。您可能有

<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

因此，引导css中声明的任何样式都将覆盖您的样式。而是尝试

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

这样，样式表中的规则将具有更高的优先级。

除此之外，最好不要使用缩小版本的bootstrap，这样您可以更轻松地删除任何冲突的类。

Answer 2

您在getbootstrap.com http://getbootstrap.com/customize/上进入定制器>

切换所需的内容：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS92dzJZQS5wbmcifQ==” alt =“在此处输入图像描述”>

然后您下载它。

您打开它。查看基本样式和全局box-sizing：border-box。

要么更改所有CSS，以使用box-sizing：border-box（将其谷歌搜索），要么将其放在：before，：after和元素上，这些都是表单，按钮，和下拉菜单（它们一起工作）。

Answer 3

如本页其他解决方案中所述，有类似的方法：

Answer 4

使样式表成为最后导入的CSS文件。

Answer 5

我不确定这是否能准确回答您的问题，但是我在所有BS 3项目中所做的工作是：

Answer 6

如此简单，少用一些即可剥离不需要的BS组件。编译并缩小bootstrap.min.css文件，然后使用以下方法将其导入到样式表中：

Answer 7

可以帮助我解决此问题的人吗？