html - 无法使用 bootstrap 3 设置列的高度

Question

我无法为这两列设置确定的高度。 我为每个 div 列、联系人和关于设置类。列拉伸(stretch)的唯一方法是当我用内容填充它或将其设置为确定的像素高度但是当我缩小页面时它们堆叠并且接触行被底部左右的行吞没。这里的例子

http://codepen.io/Chris-Brennan/pen/rOWYab?editors=110

这就是我要实现的目标。

<div class="container" id="contact_container">
    <div class="row">               
        <div class="col-md-6 contact">
            <p><a href="pdf/resumeChris.pdf" download>Download: Resume</a><p>
            <p><a href="mailto:webmaster@example.com">emailpgh@gmail.com</a></p>
            <img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
        </div>  <!---contact container---> 

        <div class="col-md-6 about">
            <p><span style="color:tomato">About Me</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <span style="color:tomato">Currently seeking Junior Design position.</span></p>
        </div> <!---about container--->
    </div>   <!---end row--->    
</div>  <!------end container----->

body{
    font-family:'Montserrat',sans-serif;
    margin-top:50px;
}
#contact_container {
    height:100%;
    padding:0 50px;
    border:1px solid red;
    overflow:hidden;
}
.contact {
    height:100%;
    padding:30px;
    background:tomato;
}
.contact p{
    font-size:1.5em;
}
.contact a{
    color:white;
}
.contact img{
    position:absolute;
    top:20px;
    right:20px;
}
.about {
    height:100%;
    padding:30px;
    background: #34495e;
    color:white;
}

/* Iphone/Android (Small Devices) ----------- */
@media only screen and (min-width : 320px) and (max-width: 767px) {
    /* Styles */
    #contact_container {
        padding:0 50px;
    }
    .contact {
        height:100%;
        padding:30px;
        background:tomato;
        font-weight:700;
    }
    .contact p{
        text-align:center;
        font-size:1.5em;
    }
    .contact a{
        color:white;
    }
    .contact img{
    }
    .about {
        height:100%;
        padding:30px;
        background: #34495e;
        color:white;
    }

Answer 1

bootstrap的网格系统是可以嵌套的。 看这个例子:

<div class="col-md-6 contact">
   <div class="col-xs-12-md-8">
      <p><a href="pdf/resumeChris.pdf" download>Download: Resume</a></p>
      <p><a href="mailto:webmaster@example.com">emailpgh@gmail.com</a></p>
   </div>
   <div class="col-xs-12-md-4">
      <img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
   </div>
</div>