Question

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

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

我自己的CSS很乱。我试图仅隔离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>

有人知道隔离欲望类的方法吗？或者可以指向另一个类似于这个和跨浏览器的拆分按钮的实现？我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">

因此在bootstrap 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/

上的自定义程序

切换你需要的东西：

enter image description here

然后你下载它。

你打开它。查看基本样式和全局框大小：border-box。

您要么更改所有CSS以使用box-sizing：border-box（google it），要么将其放在：before，：after和element所需的表单所需的所有引导程序css上，按钮和下拉列表（它们一起工作）。

Answer 3

如本页其他解决方案中所述，有以下几种方法：

从引导程序网站
在页面上的引导样式标记之后放置您不希望覆盖引导的自定义样式

根据我的经验，创建自定义引导程序css或编辑它以删除不需要的类或样式规则是不太实际的。这是因为当更新版本的bootstrap出来时，您可能需要再次执行繁琐的过程。

相反，您可以继续使用自己的样式覆盖引导样式，放置在引导样式之后，使用另一个步骤更有效地帮助您防止其他样式覆盖您的样式。

您可以在http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/或https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

一个例子可能是，写一个风格

.btn {
    background: red;
}

作为

#mypage .btn {
    background: red;
}

其中，mypage可以是页面上最多父元素的ID（可能是正文标记？）。这将使您的样式规则比引导CSS中定义的样式规则更具体，它们将不再能够覆盖您的样式规则。

请注意，上面的代码片段仅仅是一个插图，你肯定可以为这个原因编写更好的样式。

Answer 4

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

Answer 5

我不确定这是否能完全回答你的问题，但我在所有BS 3项目中所做的是：

在我的标题中：

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

custom.css

@import boostrap.less // or the fully compiled bootstrap css
// all your custom stuff, overrides, etc. down here

这样我们首先加载boostrap，但是最后加载任何你想要做的自定义意味着覆盖的可能性很高并且不会引起冲突。对于<head>

，它也是一行，更清洁

Answer 6

如此简单的使用就可以去掉你不需要的BS组件。编译并缩小bootstrap.min.css文件，然后使用以下命令将其导入样式表：

@import url（＆＃34; bootstrap.min.css＆＃34;）;在顶部。然后在您的HTML中只包含您的CSS，这些将在之后阅读。

Answer 7

正如他们之前所说，引导css导入必须在自定义css之前。像这样：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">

Answer 8

在CSS值后使用'！important'，例如：

pre { 空白：预包装！重要； }

Answer 9

很多人都在谈论在引导后添加您的自定义CSS。通常看来，这是可行的，但是，在使用.modal类时，我遇到了一段时间，它似乎在我的自定义CSS之上重新加载了引导程序。我不知道为什么。在那种情况下，我通过在CSS中为我的元素创建一个类（并更改html以使用该类）来解决该问题，这使我的CSS更具体/定义更窄，因此具有优先权，或者使用！important，如@kder所述。

因此，请尝试使用该命令，如果由于某种原因无法正常工作，则必须找到一种方法来强制将css定位为更具体的目标或使用！important。

示例（为简洁起见，代码已删除）。在这段代码中，我有bootstrap css，然后是tripper.css。如果我使用class =“ modal”删除底部的代码，则此方法有效，并且根据tripper.css中的CSS格式化了我的身体。如果我将模式代码留在底部，则必须在主体选择器中添加！important。

tripper.css

body {
  background-color:#00aaff;
}

html

<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title>Gear Closet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

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

</head>

<body>
  <div th:replace="fragments.html :: header"></div>
  <div th:replace="fragments.html :: navigation"></div>

  <div class="jumbotron text-center">
...
  </div>

  <div class="jumbotron text-center">
...
  </div>

  <!-- The Modal -->
  <div class="modal" id="importModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.import.title})"></div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <div th:replace="fragments.html :: loadFile"></div>
        </div>

        <!-- Modal footer -->
        <div th:replace="fragments.html :: modalFooter"></div>
      </div>
    </div>
  </div>
  
  <div class="modal" id="addToBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.addToBin.title})"></div>

        <!-- Modal Footer -->
        <div class="modal-footer">
          <label for="addGearBtn" class="btn btn-primary" th:text="#{navigate.add}">??navigate.add??</label>
          <label class="btn btn-danger" data-dismiss="modal" th:text="#{navigate.close}">??navigate.close??</label>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="createBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.createBin.title})"></div>
        



      </div>
    </div>
  </div>
</body>
</html>

Answer 10

我将我的 CSS 代码从外部 CSS 转移到内部 CSS。

我尝试添加 !important，但它看起来很乱而且没有帮助。此外，我将自定义 CSS 链接移到引导程序下方，但这也无济于事。

我知道我的方式很混乱，但它对我来说很有效。

CSS Bootstrap覆盖了我自己的CSS

10 个答案: