当小于1200像素时，Bootstrap表消失

Question

我有一个Bootstrap问题，我的桌子消失了。当我的页面显示超过1200像素宽时，我的表格显示完美。但当我的页面缩小到不到1200像素宽时，我的表格就会消失。我不是超级先进的bootstrap（不是设计人员），所以我不确定是什么导致了这个问题。我认为它与响应表有关。我还没有编辑我的引导程序。

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-cascade">
                <!-- heading-->
                <div class="panel-heading text-primary">
                    <h3 class="panel-title">
                        Friends List
                        <span class="pull-right">
                            <a href="#" class="panel-minimize"><i class="fa fa-chevron-up"></i></a>
                            <a href="#" class="panel-close"><i class="fa fa-times"></i></a>
                        </span>
                    </h3>
                </div>
                <!-- body -->
                <div class="panel-body">
                    <table class="table table-condensed table-hover">
                        <thead>
                            <tr>
                                <th class="visible-lg">First Name</th>
                                <th class="visible-lg">Last Name</th>
                                <th class="visible-lg">Phone Number</th>
                                <th class="visible-lg">Carrier</th>
                                <th class="visible-lg">Send Text</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var row in Model)
                            {
                                <tr>
                                    <td class="visible-lg">
                                        @row.FirstName
                                    </td>
                                    <td class="visible-lg">
                                        @row.LastName
                                    </td>
                                    <td class="visible-lg">
                                        @row.PhoneNumber@@@row.Carriers[0].CarrierEmail
                                    </td>
                                    <td class="visible-lg">
                                        @row.Carriers[0].CarrierName
                                    </td>
                                    <td class="visible-lg">
                                        @using (Html.BeginForm("SendEmail", "Admin"))
                                        {
                                            @Html.Hidden("Id", row.Id)
                                            <button type="submit" class="btn btn-success"><i class="fa fa-envelope"></i></button>
                                        }
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

Answer 1

我认为这是因为你使用的是“visible-lg”，这意味着大型时可见，bootstrap 3使用4种不同的尺寸xs，sm，md，lg。阅读本文http://getbootstrap.com/css/。

我在表格中使用这些类，它们非常完美。

<table id="proviers-table" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>Nombre</th>
        <th>Tel&#233;fono</th>
        <th>Correo Electr&#243;nico</th>
        <th>Pa&#237;s</th>
        <th>Entidad Federativa</th>
        <th>Direcci&#243;n</th>
        <th></th>
    </tr>
</thead>
    <tr>
        <td>coty</td>
        <td>1234567890</td>
        <td><a href="mailto:"></a></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
            <div class="btn-group">
                <button class="btn btn-default btn-xs edit-provider" id="1" >
                    <span class="glyphicon glyphicon-pencil"></span>
                </button>
                <button class="btn btn-default btn-xs edit-provider" id="1">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </div>
        </td>
    </tr>
    <tr>
</table>

这是我的观点：

小时：