带有 Bootstrap 的移动和桌面友好表格答案

【问题标题】：Mobile and Desktop friendly tables with Bootstrap带有 Bootstrap 的移动和桌面友好表格
【发布时间】：2015-05-31 15:29:31
【问题描述】：

我是网格系统的新手，很难理解这个网格系统。

我希望做的是在从台式机到手机的任何设备的屏幕中适应每一行表格。但我无法做到，甚至我也不确定自己是否走在正确的道路上。

这是我的试用版：http://jsfiddle.net/woqw0wyu/1/

我怎样才能使这种桌子对台式机和手机友好？提前致谢。

<body>
    <div class="container">
        <div class="row">
            <table class="table table-bordered table-hover table-condensed span12">
                <thead>
                    <tr>
                        <th class="col-md-1 col-sm-1 col-xs-1">#</th>
                        <th class="col-md-2 col-sm-2 col-xs-2">Lat</th>
                        <th class="col-md-2 col-sm-2 col-xs-2">Lng</th>
                        <th class="col-md-2 col-sm-2 col-xs-2">Description</th>
                        <th class="col-md-1 col-sm-1 col-xs-1">Value</th>
                        <th class="col-md-1 col-sm-1 col-xs-1">Status</th>
                        <th class="col-md-2 col-sm-2 col-xs-2">Last Update</th>
                        <th class="col-md-1 col-sm-1 col-xs-1">Update Count</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>39.8677955</td>
                        <td>32.8677955</td>
                        <td>Empire State Building</td>
                        <td>45</td>
                        <td>F</td>
                        <td>2014-12-19 13:13:29 </td>
                        <td>33</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>39.8677955</td>
                        <td>32.8677955</td>
                        <td>White House Building</td>
                        <td>33</td>
                        <td>E</td>
                        <td>2014-12-19 13:13:29 </td>
                        <td>22</td>
                    </tr>  
                </tbody>
            </table>
        </div>
    </div>
</body>

【问题讨论】：

标签： twitter-bootstrap responsive-design html-table

【解决方案1】：

如果您要拥有这些网格，那么您只需要最小的，因为它们都是一样的。

...
<thead>
   <tr>
       <th class="col-xs-1">#</th>
       <th class="col-xs-2">Lat</th>
       <th class="col-xs-2">Lng</th>
       <th class="col-xs-2">Description</th>
       <th class="col-xs-1">Value</th>
       <th class="col-xs-1">Status</th>
       <th class="col-xs-2">Last Update</th>
       <th class="col-xs-1">Update Count</th>
   </tr>
</thead>
...

它应该是这样的：假设您希望一列在中等屏幕上的宽度为 50%，但您希望它在大屏幕上为 33.333%，最后您希望它在屏幕或更小的屏幕上为 100%你可以这样格式化：

...
<thead>
   <tr>
       <th class="col-lg-4 col-md-6 col-xs-12">Some Text Here</th>
   </tr>
</thead>
...

查看更新的Fiddle 记住： 浪费代码就是浪费金钱。 Bootstrap 会自动设置为响应式。它是移动优先的，这意味着它首先是为移动屏幕构建的，然后媒体属性被添加到更大屏幕的格式

@media(min-width:768px){
    .div{
        /*your specific CSS for this viewport width goes here*/
    }
}

你能给我更多，我可以帮助你更多...

谢谢！

编码愉快！！

【讨论】：