Question

我有一个两列的Bootstrap网格，一个col有一个响应图像，第二个有一个标题，还有一些其他元素。我希望第二列的内容始终与图像垂直对齐。这是测试用例：

＆＃13;

.align-this {
  //?..
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
            <div class="col-sm-5 col-md-6 col-lg-7">
                <img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
            </div>
            <div class="col-sm-7 col-md-6 col-lg-5">
                <div class="align-this">
                    <h1 class="main-title">Title</h1>
                    <p>
                      Description text here. Lorem ipsum or whatever.
                    </p>
                    <div>
                        <a href="#" class="btn btn-default btn-lg">main cta</a>
                    </div>
                </div>
            </div>
</div>

＆＃13;

Answer 1

试试此代码

＆＃13;

.row{
    display: flex;
    justify-content: center;
    align-items: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
            <div class="col-sm-5 col-md-6 col-lg-7">
                <img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
            </div>
            <div class="col-sm-7 col-md-6 col-lg-5">
                <div class="align-this">
                    <h1 class="main-title">Title</h1>
                    <p>
                      Description text here. Lorem ipsum or whatever.
                    </p>
                    <div>
                        <a href="#" class="btn btn-default btn-lg">main cta</a>
                    </div>
                </div>
            </div>
</div>

＆＃13;

有一个链接http://codepen.io/santoshkhalse/pen/oBjZyG

使用Bootstrap网格在响应图像旁边的垂直对齐元素

1 个答案: