引导程序减少行填充答案

【问题标题】：bootstrap reduce row padding引导程序减少行填充
【发布时间】：2023-03-25 20:14:01
【问题描述】：

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

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

相当标准的东西

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

我在哪里进行更改？我试过通过 bootstrap.min.css 但找不到任何可以修改的东西 - 我什么都不懂

在此先感谢

最好的祝福

耶

【问题讨论】：

为什么不简单地将您自己的类添加到表中来做您想做的事？ Bootstrap 是一个起点，而不是终点。
您是否尝试自定义它：getbootstrap.com/customize/#tables
vogomatix : 对 HTML/CSS 非常陌生 - 我正在盲目地奔跑，正在努力学习和发展。非常感谢您的回复
cmmi ：是的，我尽我所能 - 然后发布 - HTML/CSS 非常新。学习和发展。非常感谢

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案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。

这是 looks 更改后的方式。

【讨论】：

【解决方案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; }

【讨论】：

【解决方案3】：

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

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

【讨论】：