Table 在 bootstrap 导航栏中

Question

额外的 'green' 部分来自哪里？

This is my nav bar The green portion

我怎样才能摆脱这个？

注意： 当我在此处放置普通文本时，我得到了很好的垂直居中格式，但在使用 table 时却没有。

这是我的 html 结构。

<li class="nav-item">
    <table class="table table-sm table-condensed table-borderless">
        <tbody class="user-logout">
        <tr>
            <td class="text-light">Farhad Hossain</td>
            <td rowspan="2">
                <a href="{{ url_for('dashboard') }}">
                    <img src="{{ url_for('static', filename='profile_pics/'+current_user.trainer.picture) }}"
                         width="56" height="56" class="rounded-circle" alt="">
                </a>
            </td>
        </tr>
        <tr>
            <td><a class="text-decoration-none text-warning" href="{{ url_for('logout') }}">Logout</a></td>
        </tr>
        </tbody>
    </table>
</li>

有希望吗？

Answer 1

我想 bootstrap tables 的默认样式在下方包含大量空白，此处可见。您可以尝试通过设置 margin-bottom: 0 !important () 来覆盖它，但一般来说，作为学习曲线，我认为您不应该将 table 用于这些目的。 table 用于显示数据，作为实际的 table，而不是用于对齐事物，但是，我们都首先通过使用 [=17= 学习了 HTML 和 CSS ]s 并且这也有效，除非您需要改变这些东西的顺序或使其响应。

Table 在 bootstrap 导航栏中

Table in bootstrap navigation bar

html

css

navigation

navbar

twitter-bootstrap