html - Bootstrap 等列高度(使用底部垂直对齐图像)

Question

实时版本链接:http://45.55.186.46/test/

我有一组部分，我想在其中使用 bottom 属性垂直对齐图像。但是目前列的高度不同。当我尝试将 height: 100% 属性添加到所有父标签时，图像变大并溢出该部分。任何帮助将不胜感激。

谢谢

HTML

<div class = "container-fluid lookbook sectionContainer">
        <div class = "row lookbookRow">
            <div class = "col-md-6">
                <img class = "img-responsive lookbook1" src = "img/lookbook1.jpg" alt = "lookbook1" >
            </div>
            <div class = "col-md-6">
                <div class = "row">
                    <div class = "col-md-6">
                        <img class = "img-responsive desktopOnly lookbook2" src = "img/lookbook2.jpg" alt = "lookbook2" >
                    </div>
                    <div class = "col-md-6  lookbookText section">
                        <h1> <strong> LEARN THE <br> PRINT RULES </strong></h1>
                        <h2> <strong> Take a lesson in 'how to wear print' from fashion aficionado, TV presenter and newly crowned 'Print Princess', Laura Jackson. </strong></h2>
                        <div style = "text-align: center">
                            <button id = "lookbookButton"> <strong> VIEW THE LOOKBOOK > </strong></button>
                        </div>
                    </div>
                </div>
                <div class = "row secondaryImages">
                    <div class = "col-xs-7">
                        <img class = "img-responsive" src = "img/lookbook3.jpg" alt = "lookbook3">
                    </div>
                    <div class = "col-xs-5">
                        <img class = "img-responsive lookbook4" src = "img/lookbook4.jpg" alt = "lookbook4">
                    </div>
                </div>
            </div>
        </div>
    </div>

节 CSS

.lookbook {
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
}

#lookbookButton {
font-family: "chantilly-light", sans-serif;
text-align: center;
background-color: #C3D5EF;
border-radius: 0px;
border: none;
color: #000000;
letter-spacing: 2px;
padding:15px;
font-size: 22px;
}

.lookbookText {
height: 100%;
}

.lookbook2 {
height: 400px;

}

.lookbookRow {
margin: 0px;
}

.lookbook4 {

bottom: -100px;
}

.secondaryImages {
padding-top: 20px;

}

全局 CSS

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 


}

.bannerRow h2 {
font-family: "chantilly-light", sans-serif;
letter-spacing: 1px;
text-align: center;
font-size: 24px;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
}

.bannerRow h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 49px;
letter-spacing: 5px;
color: #345e91;
}

.sectionContainer {
margin-top: 20px;
}

.section h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 40px;
letter-spacing: 8px;
color: #000000;
}

.section h2 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 24px;
padding-bottom: 20px;
letter-spacing: 3px;
color: #000000;
}

.mobileOnly {
display:none;
}

Answer 1

在您的测试页面上进行了一些试验并获得了一个足够的纯 css 解决方案。将要垂直对齐到底部的 .col-* 类设置为以下 css:

  float: none;
  display: inline-block;
  vertical-align: bottom;

然后将父行设置为 display: table; 以弥补内联 block 创建的额外填充，它应该正确对齐。对于一些更复杂的行，它仍然需要一些技巧，但似乎效果很好。