css - 停止 col 在某些分辨率下显示

Question

我有以下代码 (fiddle here) 可以很好地显示标题。

<!--Header-->
<div id="header-content-wrapper">
    <div class="container-fluid">
        <div id="header" class="row">
            <div class="col-md-2 panel">
                <img class="logo" width="210" height="60" src="https://www.google.ie/images/srpr/logo11w.png">
            </div>
            <div class="col-md-7 panel">
                <div class="text"><span>A piece of text here</span></div>
            </div>
            <div class="col-md-3  panel header-right">
                <form action="/account/LogOff" class="navbar-right" id="logoutForm" method="post">
                    <input type="hidden"><span>Welcome, Person!</span>
                    <span><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></span>
                </form>
            </div>
        </div>
    </div>
</div>

当分辨率太小(特别小)时，我希望“一段文字”和“欢迎的人”消失而不是环绕或堆叠。我试过 hidden-xs 但它似乎没有我想要的效果。

如有任何想法，我们将不胜感激!

Answer 1

既然你要为 sm 隐藏一列，我会让你的其他两列( Logo 和注销)等于 col-sm-6 吗？

另外请注意，您的 Logo 宽度对于该列来说太大了。查看Bootstrap docs在“img-responsive”类上，或将包含 Logo 的列设为 col-md-3，并将包含“此处的一段文字”的列设为 col-md-6。

 <!--Header-->
<div id="header-content-wrapper">
    <div class="container-fluid">
        <div id="header" class="row">
            <div class="col-sm-6 col-md-2 panel">
                <img class="logo" width="210" height="60" src="https://www.google.ie/images/srpr/logo11w.png">
            </div>
            <div class="hidden-sm col-md-7 panel">
                <div class="text"><span>A piece of text here</span></div>
            </div>
            <div class="col-sm-6 col-md-3  panel header-right">
                <form action="/account/LogOff" class="navbar-right" id="logoutForm" method="post">
                    <input type="hidden"><span>Welcome, Person!</span>
                    <span><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></span>
                </form>
            </div>
        </div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/Wy22s/471/embedded/result/