Bootstrap 4 消除标题中的空格答案

【问题标题】：Bootstrap 4 eliminate white space from titleBootstrap 4 消除标题中的空格
【发布时间】：2020-02-01 18:21:05
【问题描述】：

我想删除表格标题和子标题之间的空白。

此外，子标题“Sub1”和图标应在单元格内左对齐

      <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
        <div class="mdc-card p-0">
          <h6 class="card-title">Table title</h6>
          <div class="table-responsive">
            <table class="table">
              <thead bgcolor="#aed581">
                <tr>
                  <th>
                    <span class="text-left">Sub1</span>
                    <span class="material-icons refresh-icon">refresh</span>
                  </th>
                  <th>Sub2</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-left">A</td>
                  <td>18.5%</td>
                </tr>
                <tr>
                  <td class="text-left">B</td>
                  <td>16.3%</td>
                </tr>
                <tr>
                  <td class="text-left">V</td>
                  <td>15.5%</td>
                </tr>
            </table>
          </div>
        </div>
      </div>

【问题讨论】：

对于左对齐，你可以这样做： Sub1 刷新
您是否检查过 h6 "card-title" 是否有任何类型的填充或边距？空白可能是由于这个原因。包含字幕和图标的 th 也是如此。

标签： html bootstrap-4 responsive-design

【解决方案1】：

您需要使用一些 css 来删除该空间

将此 css 应用到您的 css 文件 margin-bottom: 0; 将删除 table-responsive 和 card title 中的空间

.card-title{
  background-color: #aed581;
  padding: 15px;
  font-weight: bold;
  margin-bottom: 0;
}

.fa-repeat{
  color: lightgray;
  cursor: pointer;
}

对于图标，我使用了很棒的字体图标，这里是 CDN 链接

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

这里是 HTML

<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
            <div class="mdc-card p-0">
              <h6 class="card-title">Table title</h6>
              <div class="table-responsive">
                <table class="table">
                  <thead bgcolor="#aed581">
                    <tr>
                      <th>
                      <i class="fa fa-repeat"></i>
                       Sub1
                        <!-- <span class="material-icons refresh-icon">refresh</span> -->
                      </th>
                      <th>Sub2</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-left">A</td>
                      <td>18.5%</td>
                    </tr>
                    <tr>
                      <td>B</td>
                      <td>16.3%</td>
                    </tr>
                    <tr>
                      <td>V</td>
                      <td>15.5%</td>
                    </tr>
                </table>
              </div>
            </div>
          </div>

您可以编辑或预览code here

【讨论】：