html - 使用自定义 CSS 覆盖 Bootstrap CSS

<分区>

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

bootstrap 表的标准定义有如下代码:

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

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

这是我的代码:

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

如何解决？

提前致谢! :)

最佳答案

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

最简单的方法是通过 Chrome 或 Firefox 的“Inspect Element”。查看要更改的表。查看 margin-bottom 的位置。也许它在 .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应该覆盖 Bootstrap 。最坏的情况下，.table.table-responsive.table-middle几乎肯定会起作用。

记得

.classname .another-classname

带空格的是父级 -> 子级

.classname.another-classname

没有空格的元素同时具有这两种类型。

关于html - 使用自定义 CSS 覆盖 Bootstrap CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35031596/

相关文章：

css - 将图像高度设置为其容器的 75%