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

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; }
}

您可以看到，屏幕宽度小于700px时，最后一列带有音频的“id=”消失了。

因此，class=“class=-xs-1”会随之消失，整个表也会变得一团糟。

为了重新平衡它，当屏幕宽度低于700px时，我想将class=“class=-xs-5”转换为col-xs-6。

我试着在class="col-xs-5“旁边添加了一个class="col-xs-6”，并添加了一个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; }
}

然而，它似乎不起作用。

当屏幕宽度低于700px时，请帮我将class="col-xs-5“转换为class="col-xs-6”。

Answer 1

你可以试试这个

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