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的“Inspect Element”。看看你想要改变的表格。查看边距底部的位置。也许是.container .table或table .table.table-responsive .table-middle或其他什么。

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

<table>

将查找所有<table>元素，然后查找具有类别table和table-responsive的{{1}}元素的子元素，然后查看该元素中的子元素类名为table-middle。

您的HTML必须如下所示：

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

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

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

只需编写table.table或table.table-responsive即可覆盖bootstrap。最糟糕的是，.table.table-responsive.table-middle几乎肯定会起作用。

记住

.classname .another-classname

空格为父母 - ＆gt;子

.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;