Html Boostrap：如何在调整大小时在图像上“粘贴”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35647044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Boostrap: How to "stick" a button over an image when re-sizing
提问by elunap
I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?
我有一个图像，我需要在其中放置一个按钮，问题是我不知道如何放置按钮并在缩小浏览器时自动重新调整大小和位置，现在我有按钮，但是当我重新调整浏览器大小以减小按钮移动时，我尝试在 css 中使用百分比购买不起作用，我该怎么办？
<div id="discover" class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
<img id="discoveryour" src="img/x.png" class="img-responsive">
</div>
</div>
<div class="row-fluid">
<div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form>
</div>
</div>
</div>
Css:
css：
.withimg {
width: 100%;
overflow:hidden;
padding: 0px;
margin: 0px;
}
#discover{
position: relative;
}
#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;
}
回答by terrymorse
Ah, the good old "how to overlay stuffon top of a responsive image -- responsively" question.
啊，古老的“如何在响应式图像上叠加东西——响应式”问题。
A little tricky, but not too bad. The tricky bit is how to make the stuff'svertical position responsive when the image size changes.
有点棘手，但还不错。棘手的一点是如何在图像大小改变时使东西的垂直位置响应。
Fear not, here's one simple way to do this:
不要害怕，这里有一个简单的方法来做到这一点：
HTML:
HTML：
<div class="img-wrapper">
<img class="img-responsive" src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
<div class="img-overlay">
<button class="btn btn-md btn-success">Button</button>
</div>
</div>
CSS:
CSS：
.img-wrapper {
position: relative;
}
.img-responsive {
width: 100%;
height: auto;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 50%;
}
The img-overlay:beforepseudo-class handles the vertical positioning job by pushing the img-overlaydiv down from the top of the image. In this example, the top of the button will always be 50% down the image (change the height: 50%attribute if you want the button higher or lower).
该img-overlay:before伪类处理通过推动垂直定位作业img-overlayDIV从图像的顶部向下。在此示例中，按钮的顶部将始终位于图像下方 50%（height: 50%如果您希望按钮更高或更低，请更改属性）。
To make the button sizeresponsive to window width, you can create a new class for your button. Let's call it btn-responsive(this replaces btn-mdin the example above). Then use @mediaqueries to adjust the btn-responsiveattributes for different window widths. Something like this:
要使按钮大小响应窗口宽度，您可以为按钮创建一个新类。让我们称它为btn-responsive（这btn-md在上面的示例中替换）。然后使用@media查询来调整btn-responsive不同窗口宽度的属性。像这样的东西：
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
@media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
and so forth for other screen widths.
对于其他屏幕宽度，依此类推。
回答by Alex Todef
I have to ask if there's a possibility to replace form tag into another DIV? Then you can just use position: absolutefor button. I created fiddle to show how https://jsfiddle.net/1x1pjwk7/
我不得不问是否有可能将表单标签替换为另一个 DIV？然后你可以只使用position: absolute按钮。我创建了小提琴来展示https://jsfiddle.net/1x1pjwk7/
