Question

我创建了一个带有标签的Bootstrap导航栏的简单网站。每个选项卡都显示一个表。（见here。）

这适用于Windows 8.1上的Chrome 45和IE 11。

在Firefox中，如果窗口宽度大于767px，表格将正确放置到导航栏。

<div id="content">
<ul class="nav nav-pills nav-tabs nav-justified navbar-header">
    <li class="active"> <a href="#">Tab 1</a>
    </li>
    <li> <a href="#">Tab 2 </a>
    </li>
</ul>
<div>
    <h1>test</h1>
    <table class="table table-bordered table-striped table-responsive" id="azubiTable">
        <thead>
            <tr id="head">
                <th>1st col</th>
                <th>2nd col</th>
                <th>3rd col</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1</td>
                <td>2.1</td>
                <td>3.1</td>
            </tr>
            <tr>
                <td>1.2</td>
                <td>2.2</td>
                <td>3.2</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

我最好的解释是这是一个浮动清除问题，在FF中无法正常工作。

如果将clear:both添加到包含表的div中，则它在FF中运行。

Answer 2

将nav和table放在col-*-12这样的

中

<div id="content">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <nav>
                <ul class="nav nav-pills nav-tabs nav-justified navbar-header">
                    <li class="active"> <a href="#">Tab 1</a>

                    </li>
                    <li> <a href="#">Tab 2 </a>

                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table class="table table-bordered table-striped table-responsive" id="azubiTable">
                <thead>
                    <tr id="head">
                        <th>1st col</th>
                        <th>2nd col</th>
                        <th>3rd col</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1.1</td>
                        <td>2.1</td>
                        <td>3.1</td>
                    </tr>
                    <tr>
                        <td>1.2</td>
                        <td>2.2</td>
                        <td>3.2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Fiddle

Bootstrap：Firefox无法正确放置宽度超过767px的表格

2 个答案: