使用自定义 CSS 覆盖 Bootstrap CSS [重复]答案

【问题标题】：Override Bootstrap CSS with custom CSS [duplicate]使用自定义 CSS 覆盖 Bootstrap CSS [重复]
【发布时间】：2016-01-27 07:54:45
【问题描述】：

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

引导表的标准定义代码如下：

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

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

这是我的代码：

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

如何解决？

提前致谢！ :)

【问题讨论】：

您的代码只会更改具有“table”类和“table-responsive”类的对象内的“table-middle”类对象，该对象位于表内。
不太清楚你指的是什么。我已将课程应用到我的桌子上。

张贴您的 html 和 css 以便我可以看到布局谢谢。

table .table-responsive .table-middle 试试看这个

【解决方案1】：

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

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

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

 table .table.table-responsive .table-middle

将查找所有<table> 元素，然后查找该<table> 元素的类名为table 和table-responsive 的子元素，然后在该元素内部查找类名为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

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

【讨论】：

【解决方案2】：

尝试添加important。

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

【讨论】：

【解决方案3】：

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

【讨论】：