使用自定义 CSS 覆盖 Bootstrap CSS

Question

我在覆盖一些 Bootstrap 的 CSS 样式时遇到了一个小问题。

引导表的标准定义具有以下代码：

.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}

我想使用我自己的 css 代码将 margin-bottom 设置为 0px，但是我在覆盖它时遇到了一些问题。

这是我的代码：

table .table.table-responsive .table-middle {
margin-bottom: 0px;
}

如何解决？

提前致谢！ :)

Answer 1

不要添加重要的。 这是一个坏习惯，将来会让你更加头疼。 另外，我怀疑它会解决问题。 相反，尝试找出为什么您的定位（table .table.table-responsive .table-middle）没有定位和覆盖您想要的表格。

最简单的方法是通过 Chrome 或 Firefox 的“检查元素”。 查看您要更改的表。 查看边距底部的位置。 也许它在.table.blue或.container .table或其他东西上。

但是，从您的定位来看，我怀疑这是一个问题。 相反，我相信您没有针对您想要的元素。

 table .table.table-responsive .table-middle 

将查找所有<table>元素，然后查找类名为table AND table-responsive <table>元素的子元素，然后在该元素中查找类名为table-middle子元素。

您的 HTML 必须如下所示：

<table>
    <??? class='table table-responsive>
        <??? class="table-middle">

相反，我猜你有一个看起来像这样的<table>元素：

<table class="table table-responsive table-middle">

简单地编写table.table或table.table-responsive应该覆盖引导程序。 最坏的情况下， .table.table-responsive.table-middle几乎肯定会起作用。

记住

.classname .another-classname

带空格的父 -> 子

.classname.another-classname

没有空格是一个元素同时具有这两个类。

Answer 2

尝试添加important .

table .table.table-responsive .table-middle {
   margin-bottom: 0px !important;
}

Answer 3

尝试在 css 文本后使用 !important。 我在 padding-bottom 下面展示了一个例子：4.5rem !important;