如何使用媒体查询更改 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; }
}

您可以看到最后一列 id="audio" 消失了，屏幕宽度低于 700 像素。

因此，class="col-xs-1" 随之消失，整个表格都被弄乱了。

为了重新平衡它，我想在屏幕宽度低于 700 像素时将 class="col-xs-5" 变成 class="col-xs-6"。

我尝试在 class="col-xs-5" 旁边添加一个 class="col-xs-6" 并添加一个 CSS 来隐藏一个/显示另一个高于/低于 700 像素：

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

但是，它似乎不起作用。

当屏幕宽度低于 700 像素时，请帮我把 class="col-xs-5" 变成 class="col-xs-6"。

Answer 1

你可以试试这个

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