css - Twitter Bootstrap 横幅 - 如何呈现

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无法正确显示代码。

希望它会帮助你。