使用自定义 CSS 覆盖 Bootstrap CSS
我在覆盖 Bootstrap 的一些 CSS 样式时遇到了一个小问题.
I have a small problem overriding some of Bootstrap's CSS style.
引导表的标准定义有以下代码:
The standard definition of a bootstrap table has the following code:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
我想使用我自己的 css 代码将 margin-bottom 设置为 0px，但是我在覆盖它时遇到了一些问题.
I would like to set margin-bottom to 0px, using my own css code, but I'm having some problems overriding it.
这是我的代码:
table .table.table-responsive .table-middle {
margin-bottom: 0px;
}
如何解决?
提前致谢！:)
不要添加重要的.这是一个坏习惯，将来会让你更加头疼.另外，我怀疑它会解决问题.相反，尝试找出您的定位(table .table.table-responsive .table-middle)没有定位和覆盖您想要的表格的原因.
Don't add important. That is a bad habit to fall into and will cause you even more headaches in the future. Plus, I doubt it will solve the problem. Instead, try to find out why your targeting (table .table.table-responsive .table-middle) isn't targeting and overriding the table you want.
最简单的方法是通过 Chrome 或 Firefox 的检查元素".查看您要更改的表.查看边距底部的位置.也许它在 .table.blue 或 .container .table 或其他东西上.
The easiest way to do this is via Chrome or Firefox's "Inspect Element". Take a look at the table you want to change. See where the margin-bottom lies. Maybe it's on .table.blue or .container .table or something.
但是，从您的定位来看，我怀疑这是一个问题.相反，我相信您没有针对您想要的元素.
However, judging by your targeting, I doubt that is an issue. Instead, I believe you aren't targeting the element you want.
table .table.table-responsive .table-middle
将查找所有 will look for all 您的 HTML 必须如下所示: Your HTML would have to look like this: 相反，我猜你有一个看起来像这样的 Instead, I'm guessing you have a 简单地编写 Simply writing 记住 带有空格的父 -> 子 with a space goes parent -> child 没有空格的是一个元素同时具有这两个类. without a space is one element that has both of those classes. 元素，然后使用
table 的类名查找该 元素的子元素AND
table-responsive，然后在该元素中查找类名为 table-middle 的子元素.
<table> elements, then look for children of that <table> element with the classname of table AND table-responsive, and then look inside that element for children with the classname of table-middle.<table>
<??? class='table table-responsive>
<??? class="table-middle">
元素:
<table> element that looks something like this:<table class="table table-responsive table-middle">
table.table 或 table.table-responsive 应该覆盖引导程序.最坏的情况下，.table.table-responsive.table-middle 几乎肯定会起作用.table.table or table.table-responsiveshould override bootstrap. Worst comes to worst, .table.table-responsive.table-middle will almost certainly work. .classname .another-classname
.classname.another-classname