我希望有人能帮助我解决这个 Bootstrap 问题,因为我很困惑。
我被要求在底部垂直对齐图像和其中包含图像的链接。
我面临的问题是他们还希望链接在链接/图像组合上具有pull-right
,这会杀死大多数垂直对齐类,因为它们依赖于 >float:none
,并且向右拉需要float:right
这是迄今为止我的代码:
<div class="container"> <!-- start of container -->
<!-- Left side sub-navbar goes here (not important) -->
<div class="col-xs-12 col-md-9 col-md-offset-1"> <!-- start of section -->
<div class="row"> <!-- start of outer-most row -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row"> <!-- start of title row -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1 style="margin-bottom:5px;"><strong>TITLE GOES HERE</strong></h1>
<hr class="tall">
</div>
</div> <!-- end of title row -->
<div class="row"> <!-- start of image/link row -->
<!-- left image -->
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
</div>
<!-- link/image combo -->
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 pull-right">
<a href="/" target="_blank">
<img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
</a>
</div>
</div> <!-- end of image/link row -->
</div> <!-- end of outer-most row -->
</div> <!-- end of section -->
</div> <!-- end of container -->
这是我为那些喜欢漂亮图片的人制作的 BootPly:http://www.bootply.com/eiEPXErfJx
附注抱歉,如果我的 Bootstrap 代码因额外的 row
和 col-*
而变得臃肿,我仍在学习它。
虽然我接受了这个答案,但它在移动设备上并不完美。到目前为止,我发现的最佳修复方法是更改左侧图像和链接/图像组合 div 上的 col-* 类,如下所示:
<!-- left image -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
</div>
<!-- link/image combo -->
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 bottom-align-text">
<a href="/" target="_blank">
<img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
</a>
</div>
这将强制按钮彼此相邻,即使在移动设备上也是如此,以确保按钮不会覆盖左侧图像并隐藏其底部
最新代码:
<div class="container"> <!-- start of container -->
<!-- Left side sub-navbar goes here (not important) -->
<div class="col-xs-12 col-md-9 col-md-offset-1"> <!-- start of section -->
<div class="row"> <!-- start of outer-most row -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row"> <!-- start of title row -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1 style="margin-bottom:5px;"><strong>TITLE GOES HERE</strong></h1>
<hr class="tall">
</div>
</div> <!-- end of title row -->
<div class="row"> <!-- start of image/link row -->
<!-- left image -->
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
</div>
<!-- link/image combo -->
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 bottom-align-text">
<a href="/" target="_blank">
<img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
</a>
</div>
</div> <!-- end of image/link row -->
</div> <!-- end of outer-most row -->
</div> <!-- end of section -->
</div> <!-- end of container -->
最佳答案
向 div 行添加了一个类,其中包含应与底部对齐的上下文:
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
html:
<div class="row .... bottom-align-text" ..>
关于html - Bootstrap 3底部垂直对齐图像并链接到链接右拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34367058/