bootstrap减少行填充

Question

我正在使用Bootstrap 3.x和这样的表定义

<table class="table table-hover table-condensed table-striped table-bordered">

很标准的东西

我想减少单元格上的默认垂直填充 - 希望进一步减少单元格上的填充。 我知道table-condensed将垂直填充减少了50％。 我想将它减少到1px。

我在哪里进行更改？ 我试过通过bootstrap.min.css但是找不到任何可以修改的内容 - 我没理解

提前谢谢了

最好的祝愿

艾耶

Answer 1

如果您知道如何使用浏览器的检查工具（ 右键单击 - >检查元素 ），这很容易。 如果你想学习CSS，这将是一个非常重要的工具。

所以找到这个属性：

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

有padding: 5px; ，将其更改为1px。

这是改变时的外观 。

Answer 2

注 - 除了修改使用此引导类的所有表的.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; }

Answer 3

+1“Inspect Element”...告诉您每个元素的确切设置以及它们的来源。 用于处理布局的宝贵工具。

至于自定义Bootstrap（至少v3），我相信Site.css是本地站点级覆盖文件...所以不要更改核心引导程序css文件...而只是将替换样式添加到Site.css并使其成为你的个人档案。 如果样式覆盖似乎没有，请将！important标记添加到它们。 如果您更新了引导包，请务必保存Site.css的副本，以便重新应用自定义。