Question

免责声明：我对CSS并不熟悉。我正在使用overflow：hidden来截断动态Bootstrap选项卡上的文本。创建第二个选项卡时，由于下面的填充，所有选项卡都会略微向上移动。我试图摆脱额外的填充因为当所有元素向上移动时出现底部边框。我做了一些谷歌搜索，但使用垂直对齐底部或顶部并没有消除差距。我不知道这是否与它有任何关系，但是还有一个margin-bottom：-1px以隐藏底部边框以获得连接选项卡的效果。

我希望它看起来像没有溢出的样子：隐藏检查。

unwanted space with overflow hidden

with overflow hidden

without overflow hidden

<div class=container-fluid" id="dashboard">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#overall-statistics" role="tab" aria-controls="Overall Statistics"><span>Overall Statistics</span></a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="overall-statistics" role="tabpanel">
        <table>
          <tr>
              <td style="padding: 10px;">
                  View by 
              </td>
              <td style="padding: 10px;">
                    <select class="selectpicker" id="view-by" multiple title="Levels">
                      <option id="view-levels">Levels</option>
                      <option id="view-store-type">Store Type</option>
                    </select>
              </td>
          </tr>
        </table>
      </div>
      </div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

.nav-tabs .nav-item {
margin-left: -1px;
width: 150px;
}

.nav-tabs .nav-link {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}

Answer 1

要消除额外的边框，您可能需要添加以下内容：

.nav-tabs .nav-link { border-bottom: none; }

溢出：隐藏为标签添加额外的填充/高度

1 个答案: