Question

我无法为这两列设置确定的高度。我为每个div列设置了类，联系和about。列伸展的唯一方法是当我用内容填充它或将其设置为确定的像素高度时，但当我收缩页面时，它们堆叠并且联系行被底部吞噬到行。例如

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>

Answer 2

.contact img{
 position: relative;
}
.contact {
      text-align:center;
    height:100%;
    padding:30px;
    background:tomato;
    font-weight:700;

}
.contact p{

  font-size:1.5em;


}

只需在移动视图的css文件中进行这些更改即可。之后，如果没有根据您的需要对齐，只需给你的图像留一个边距。

无法使用bootsrap 3为列设置高度

2 个答案: