Question

我正在使用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;
    }
}

Answer 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

这是你在找什么？

Answer 2

有时你必须反对bootstrap的花车来获得你正在寻找的东西，基本上是不使用它们（拉动等）。我已经更新了你的小提琴，我相信它接近你的要求。另一个问题是你的@media由于结果窗口的大小而放弃了。

Updated Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我在您的标记中添加了“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”的不同方式显示。

Answer 4

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

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

我将类box-height添加到html中，因为图像似乎最大为141px [至少对我来说，W7 PC]，我将容器高度设置为该高度（141px）

你可以在这里看到一个有效的例子; http://jsfiddle.net/8pLjfq5u/18/

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

修改

我建议不要在此实例中设置bootstrap类中的css更改。

在某些时候，当您需要在原始版本中按预期工作时，对核心CSS的更改会让您陷入困境。

第二次修改

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

这也可以扩展到移动视图，没有需要添加其他类或css属性。

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

Answer 5

这里有两个可能的问题 - 取决于你想要达到什么样的优势！

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

<强>首先
如果您希望在整个页面的右下角放置 阅读更多 ：

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

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

<强>第二
如果您想在文章的右下角找到 阅读更多

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

我尝试在height: 100%;的父元素上设置#read-more，但它不起作用所以，看起来，您必须将#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>

如何使用bootstrap将按钮移动到div的右下角？

5 个答案: