Html 如何使用引导程序将按钮移动到div的右下角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29515784/
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
How to move button to right bottom corner of div with bootstrap?
提问by kramer65
I'm building a website using Bootstrap and I'm now trying to make something like this:
我正在使用 Bootstrap 构建一个网站，现在我正在尝试做这样的事情：
===========================================================
| #################### |
| #################### Big Title |
| ##THIS IS AN IMAGE## |
| #################### |
| #################### Read more |
===========================================================
The problem is that I can't align the ReadMore button to the bottom. I tried using the tips in this SO answer, but to no avail. I created a fiddle of my code hereand I'll paste my code below.
问题是我无法将 ReadMore 按钮与底部对齐。我尝试使用此 SO answer 中的提示，但无济于事。我在这里创建了我的代码的小提琴，我将在下面粘贴我的代码。
Does anybody know what I'm doing wrong here? All tips are welcome!
有谁知道我在这里做错了什么？欢迎所有提示！
My HTML looks like this:
我的 HTML 如下所示：
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img class="img-responsive" src="image.png">
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
<div class="col-sm-4"><div class="row"></div></div>
</div>
</div>
and my css:
和我的CSS：
@media (min-width: 768px ) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
}
回答by chiapa
Try this:
尝试这个：
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@media (min-width: 768px) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
.col-sm-7 {
position: absolute;
width: 100%;
height: 100%;
}
}<div class="container">
<div class="row">
<div class="col-sm-12"> <a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
</div>
</div>Here's a fiddle
这是一把小提琴
Is it what you were looking for?
是你要找的吗？
回答by cboler
Sometimes you have to work against bootstrap's floats to get what you're looking for, basically by not using them (pulls, etc). I've updated your fiddle, and I believe it's close to what you were asking. Another issue was your @media was throwing things off due to the size of the result window.
有时，您必须针对引导程序的浮点数工作才能获得所需的内容，基本上是通过不使用它们（拉动等）。我已经更新了你的小提琴，我相信它接近你的要求。另一个问题是您的@media 由于结果窗口的大小而丢掉了东西。
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.rel {
position: relative;
height:300px;
width: 600px;
}
.read-more {
position: absolute;
bottom: 0;
right: 0;
}
.background {
background-image: url("http://placehold.it/600x300");
height: 300px;
width: 600px;
}
}<div class="container rel"> <a href="/thelink">
<article class="property-ad">
<div class="background img-responsive">
<div class="title">Big Title</div>
</div>
</article>
<button class="btn btn-default read-more">Read more</button>
</a>
</div>回答by MrMarlow
This is due to the right panel only being the height of the content, in this case the title and the button.
这是因为右侧面板只是内容的高度，在这种情况下是标题和按钮。
To counter this, you need to set a height.
为了解决这个问题，你需要设置一个高度。
I added the class box-heightto the html and, as the image seems to max at 141px [At least for me, W7 PC], I set the container height to that height (141px)
我将类添加box-height到 html 中，因为图像似乎最大为 141px [至少对我来说，W7 PC]，我将容器高度设置为该高度 ( 141px)
You can see a working example here; http://jsfiddle.net/8pLjfq5u/18/
你可以在这里看到一个工作示例；http://jsfiddle.net/8pLjfq5u/18/
Without the height being given, the button will just fix itself to the height of the container, which in this case is set by the title height etc.
如果没有给出高度，按钮只会将自身固定到容器的高度，在这种情况下，它由标题高度等设置。
Edit
编辑
I would advise against setting css changes in bootstrap classes in this instance.
在这种情况下，我建议不要在引导类中设置 css 更改。
At some point, that change to the core CSS will bite you in the behind, when you need it to work as intended in the original build.
在某些时候，当您需要它在原始构建中按预期工作时，对核心 CSS 的更改会在后面咬您。
Second Edit
第二次编辑
It would appear that if you simply move the button into a col-sm-12div, that you can get the desired result.
看起来，如果您只是将按钮移动到col-sm-12div 中，您就可以获得所需的结果。
This also scales into mobile view too, withoutthe need to add additional classes or css attributes.
这也可以扩展到移动视图，而无需添加额外的类或 css 属性。
回答by HisPowerLevelIsOver9000
I added "col-xs" classes to your markup and it generated the desired display based on what you showed in your question
我在您的标记中添加了“col-xs”类，它根据您在问题中显示的内容生成了所需的显示
<div class="col-sm-5 col-xs-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7 col-xs-7">
<div class="title">Big Title</div>
If you plug that into your fiddle it displays the way you want with your media query. When you really shrink it down though it get's pretty illegible at that point.
如果你把它插入你的小提琴，它会以你想要的方式显示你的媒体查询。当你真正缩小它时，虽然它在那时变得非常难以辨认。
Maybe you want to adjust the media query to display differently for "sm" and "xs".
也许您想调整媒体查询以对“sm”和“xs”进行不同的显示。
回答by Badenlebt
There are two possible problems here - depending on what exaclty you want to achieve!
这里有两个可能的问题 - 取决于您想要达到的精确度！
(I guess it's the second one you are looking for!)
（我猜这是你要找的第二个！）
First:
if you want to position yourread moreat the bottom right corner of the whole page:
第一：
如果你想把你的阅读更多放在整个页面的右下角：
You have position:relativein your CSS for .row.
你position:relative的 CSS 中有.row.
This means all elements inside an element with class rowwill be positioned relative to this element - so your read more can only be positioned inside it with your CSS (with negative values for right and bottom it can be outside, but still relative to this element).
这意味着具有 class 的元素内的所有元素row都将相对于该元素定位 - 因此您的 read more 只能用您的 CSS 定位在其中（右侧和底部的负值可以在外部，但仍然相对于该元素） .
Second:
If you want to position yourread moreat the the bottom right corner of the article
第二：
如果你想把你的阅读更多放在文章的右下角
The parent element to your #read-morehas only height of 20px, because the text Big Titlein the div above is only of that height.
As your #read-moreelement is positioned absolute, it doesn't contribute to the height.
您的父元素的#read-more高度仅为20px，因为上面 div 中的文本Big Title仅具有该高度。
由于您的#read-more元素是绝对定位的，因此它不会影响高度。
I tried setting height: 100%;on the parent element of #read-more, but it doesn't work.
So, it seems, you will have to put your #read-moreelemnt outside of its parent div, directly into the article, like this:
我尝试height: 100%;在 的父元素上设置#read-more，但它不起作用。
因此，看起来，您必须将您的#read-more元素放在其 parent 之外div，直接放入文章中，如下所示：
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</article>
</a>
</div>
</div>
