如何使用引导程序将按钮移动到 div 的右下角？答案

【问题标题】：How to move button to right bottom corner of div with bootstrap?如何使用引导程序将按钮移动到 div 的右下角？
【发布时间】：2021-09-10 01:37:06
【问题描述】：

我正在使用 Bootstrap 构建一个网站，现在我正在尝试制作这样的东西：

===========================================================
|    ####################                                 |
|    ####################   Big Title                     |
|    ##THIS IS AN IMAGE##                                 |
|    ####################                                 |
|    ####################                      Read more  |
===========================================================

问题是我无法将 ReadMore 按钮与底部对齐。我尝试使用this SO answer 中的提示，但无济于事。我创建了一个fiddle of my code here，并将我的代码粘贴到下面。

有人知道我在这里做错了什么吗？欢迎所有提示！

我的 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>

还有我的 CSS：

@media (min-width: 768px ) {
    .row {
        position: relative;
    }
    #read-more {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

【问题讨论】：

您尝试过的任何更新，哪些有效，哪些无效等？
什么版本的引导程序？

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

@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>

这是fiddle

这是你要找的吗？

【讨论】：

【解决方案2】：

有时您必须使用引导程序的浮动来获得您正在寻找的东西，基本上不使用它们（拉动等）。我已经更新了你的小提琴，我相信它接近你的要求。另一个问题是你的@media 由于结果窗口的大小而把事情扔掉了。

Updated Fiddle

@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>

【讨论】：

【解决方案3】：

这是因为右侧面板只是内容的高度，在本例中是标题和按钮。

要解决这个问题，您需要设置一个高度。

我在 html 中添加了 box-height 类，并且由于图像似乎最大为 141px [至少对我来说，W7 PC]，我将容器高度设置为该高度 (141px)

您可以在此处查看一个工作示例； http://jsfiddle.net/8pLjfq5u/18/

在没有给出高度的情况下，按钮只会将自身固定到容器的高度，在这种情况下由标题高度等设置。

编辑

我建议不要在这种情况下在引导类中设置 css 更改。

在某些时候，当您需要它在原始构建中按预期工作时，对核心 CSS 的更改会在后面咬住您。

二次编辑

如果您只是将按钮移动到col-sm-12 div 中，您似乎可以获得所需的结果。

这也可以扩展到移动视图，无需添加额外的类或 css 属性。

http://jsfiddle.net/8pLjfq5u/20/

【讨论】：

【解决方案4】：

这里有两个可能的问题 - 取决于您想要达到的精确度！

（我猜这是你要找的第二个！）

首先：
如果您想将您的 阅读更多 放在整个页面的右下角：

您的 CSS 中有 position:relative 用于 .row。

这意味着具有row 类的元素内的所有元素都将相对于该元素定位 - 因此您的阅读更多内容只能使用您的 CSS 定位在其中（右侧和底部的负值可以在外部，但是仍然相对于这个元素）。

第二：
如果你想把你的 阅读更多 放在文章的右下角

#read-more 的父元素只有 20px 的高度，因为上面 div 中的文本 Big Title 只是那个高度。
由于您的 #read-more 元素是绝对定位的，因此它不会影响高度。

我尝试在#read-more的父元素上设置height: 100%;，但它不起作用。
因此，您似乎必须将 #read-more 元素放在其父 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>

【讨论】：

【解决方案5】：

我在您的标记中添加了“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>

如果您将其插入小提琴，它会以您想要的方式显示您的媒体查询。当你真正缩小它时，虽然它在那个时候变得非常难以辨认。

也许您想调整媒体查询以对“sm”和“xs”进行不同的显示。

【讨论】：

【解决方案6】：

试试这个：

<div class="d-flex justify-content-end">
    <button class="btn" type="submit">Connect</button>
</div>

【讨论】：