Question

我的表正在使用Bootstrap网格系统。

当屏幕宽度低于700px时，我想要摆脱一列。

这就是我所拥有的：

HTML

<table>
                    <thead>
                        <tr>
                            <th class="col-xs-1">#</th>
                            <th id="when" class="col-xs-2">When</th>
                            <th class="col-xs-5">Track ID</th>
                            <th class="col-xs-2 tracklink"><i class="fa fa-soundcloud" aria-hidden="true"></i></th>
                            <th id="buy" class="col-xs-1 tracklink"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></th>
                            <th class="col-xs-1" id="audio"></th> <!-- column to show sound icon when playing-->
                        </tr>
                    </thead>
                    <tbody id='trackinfo'>
                        <tr>
                            <td id='order' class="col-xs-1">1</td>
                            <td id='timecue' class="col-xs-2">00:00</td>
                            <td id='song' class="col-xs-5 song-tracklist">Korama - Pretty Baby</td>
                            <td id='link' class="col-xs-2 tracklink"><a href='http://www.google.fr' target="_blank" class="tracklink">Link</a></td>
                            <td id='link' class="col-xs-1 tracklink"><a href='http://www.google.fr' target="_blank" class="tracklink">Link</a></td>
                            <td class="col-xs-1" id="audio"><i class="fa fa-volume-up tracklink-icon" aria-hidden="true"></i></td>
                        </tr>
                    </tbody>
                </table>

CSS

@media screen and (max-width: 700px) {
  #audio{ 
display: none; }
}

你可以看到id =＆＃34; audio＆＃34;的最后一列屏幕在700px宽度以下消失。

因此，类=＆＃34; col-xs-1＆＃34;消失了，整个桌子搞砸了。

为了重新平衡它，我想把这个类=＆＃34; col-xs-5＆＃34;进入班级=＆＃34; col-xs-6＆＃34;当屏幕宽度低于700px时。

我尝试添加一个类=＆＃34; col-xs-6＆＃34;在class =＆＃34; col-xs-5＆＃34;旁边并添加了一个CSS来隐藏一个/显示700px以上/以下的其他：

CSS

@media screen and (max-width: 700px) {
th td .col-xs-6 { 
display: block; }
}
@media screen and (max-width: 700px) {
th td .col-xs-5 { 
display: none; }
}

@media screen and (min-width: 700px) {
th td .col-xs-6 { 
display: none; }
}
@media screen and (min-width: 700px) {
th td .col-xs-5 { 
display: block; }
}

然而，它似乎不起作用。

请帮我转课=＆＃34; col-xs-5＆＃34;进入班级=＆＃34; col-xs-6＆＃34;当屏幕宽度低于700px时。

Answer 1

你可以试试这个

@media screen and (max-width: 700px) {
th td .col-xs-5 { 
width:50%;
 }
}

如何使用媒体查询更改Bootstrap网格系统

1 个答案: