Html bootstrap 减少行填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23540748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap reduce row padding
提问by K Y Iyer
I am using Bootstrap 3.x with a table definition like this
我正在使用带有这样的表定义的 Bootstrap 3.x
<table class="table table-hover table-condensed table-striped table-bordered">
Pretty standard stuff
很标准的东西
I want to reduce the default vertical padding on the cells - want to reduce the padding on cells further. I know that table-condensed reduces the vertical padding by 50%. I want to reduce it to just 1px.
我想减少单元格上的默认垂直填充 - 想进一步减少单元格上的填充。我知道 table-condensed 将垂直填充减少了 50%。我想把它减少到只有 1px。
Where do I make the change? I have tried going through bootstrap.min.css but can't find anything to modify there - nothing I understand
我在哪里进行更改？我试过通过 bootstrap.min.css 但找不到任何可以修改的东西 - 我什么都不明白
Many thanks in advance
提前谢谢了
Best wishes
最好的祝愿
Iyer
耶尔
回答by AyB
It's pretty easy if you know how to use inspector tool of your browser (Right click->Inspect Element). If you want to learn CSS this would be a very important tool.
如果您知道如何使用浏览器的检查器工具（右键单击->检查元素），这将非常容易。如果你想学习 CSS，这将是一个非常重要的工具。
So find this property:
所以找到这个属性：
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
padding: 5px;
}
which has padding: 5px;, change it to 1px.
其中有padding: 5px;，将其更改为 1px。
Here's how it lookswhen changed.
这是更改后的外观。
回答by MarcoZen
Note - Instead of modifying the .table-condensed class which will all tables which use this bootstrap class, it could be more advantageous to make another class (say table_morecondensed ) as below...
注意 - 不是修改 .table-condensed 类，它将使用这个引导类的所有表，而是创建另一个类（比如 table_morecondensed ）可能更有利，如下所示......
.table_morecondensed>thead>tr>th,
.table_morecondensed>tbody>tr>th,
.table_morecondensed>tfoot>tr>th,
.table_morecondensed>thead>tr>td,
.table_morecondensed>tbody>tr>td,
.table_morecondensed>tfoot>tr>td{ padding: 2px; }
回答by John Kowtko
+1 "Inspect Element" ... tells you exactly what the settings are per element and where they are coming from. Invaluable tool for working with the layout.
+1“检查元素”......准确地告诉您每个元素的设置以及它们的来源。用于处理布局的宝贵工具。
As for customizing Bootstrap (v3 at least), I believe Site.css is the local site-level override file ... so DO NOT change the core bootstrap css files ... instead just add override styles into Site.css and make that your personal file. If the style overrides don't appear to take, add the !important tag to them. And if you ever update your bootstrap package be sure to save a copy of your Site.css so you can reapply your customizations.
至于自定义 Bootstrap（至少是 v3），我相信 Site.css 是本地站点级覆盖文件......所以不要更改核心引导 css 文件......而只需将覆盖样式添加到 Site.css 并使其成为你的个人档案。如果样式覆盖似乎不适用，请将 !important 标签添加到它们。如果您曾经更新过引导程序包，请务必保存 Site.css 的副本，以便您可以重新应用您的自定义。
