Question

我有以下代码（小提琴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>

我想要＆＃34;文本＆＃34;和＃34;欢迎的人＆＃34;，当分辨率太小（超小）时消失而不是包装或堆叠。我试过hidden-xs，但它似乎没有我想要的效果。

任何想法都将不胜感激！

Answer 1

由于你隐藏了一个sm列，我会让你的另外两列（logo和logout）等于col-sm-6吗？

另外，标题宽度对于色谱柱来说太大了。请参阅类'img-responsive'上的Bootstrap docs或制作包含徽标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/

Answer 2

我使用@media几乎得到了我想要的效果：

<!--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" id="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>

CSS

.header-right {
    color: #333e48;
    font-weight: bold;
    font-style: italic;
    line-height: 60px;
    padding-right: 20px;
}

.text {
    font-size: 18px;
    color: #97979d;
    line-height: 60px;
    padding-right: 20px;
    padding-left: 20px;
}

@media screen and (max-width: 546px) {
    #text {
        display: none
    }
}

@media screen and (max-width: 750px) {
    #logoutForm {
        display: none
    }
}

fiddle

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

2 个答案: