Question

这可能是一个非常基本的问题，但我有一个横幅，左边是图像，右边是文字。旗帜下只是一块颜色。当页面变小时，我的期望是横幅中的位将堆叠（保持两者的背景颜色）并且颜色块（class =“blue-line”）将落在它们下面。

这是标记：

   <section>
        <div class="row header">
            <div class="col-sm-6">
                <img src="../images/logo.png" height="100px" />
            </div>
            <div class="col-sm-6 title">
                <h2>Some Title Text</h2>
            </div>
        </div>   
        <div class="row">
            <div class="col-sm-12 blue-line"></div>
        </div>      
    </section>

和css

    .header {
        background-color: #F2EBCC;
        border: 10px solid #F2EBCC;
        height: 120px;
    }

.row > .title {
    text-align: right;
    top: 45%;
}

提前致谢！

JSFiddle：http://jsfiddle.net/3n6Kd/

Answer 1

试试这个：

<section>
     <div class="row header">
           <div class="col-sm-6">
                <img src="../images/logo.png" height="100px" />
           </div>

           <div class="col-sm-6 title">
                 <h2>Some Title Text</h2>
           </div>
    </div>

    <div class="row">
           <div class="col-sm-12 blue-line"></div>
    </div>

和

.header {
     background-color: #F2EBCC;
     height: 120px;
 }

.title {
    text-align: right;
    display: block;
    padding: 10px;
 }

.blue-line {
    margin-top:10px;
    height: 15px;
    background-color: blue;
 }

文本位于第一列而不是蓝线下，但它似乎出现在蓝线上方，因此请在您的计算机上尝试，因为有时 jsfiddle.net 不显示代码正确。

希望它会对你有所帮助。

Twitter Bootstrap Banner - 如何呈现

1 个答案: