如何通过引导将按钮移动到div的右下角？

Question

我使用的是引导建立一个网站，现在我试图让这样的事情：

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

我补充说： “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 2

试试这个：

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

这是由于右侧面板只是内容的高度，在这种情况下是标题和按钮。

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

我加入了类box-height到HTML，并作为形象似乎最大的[至少对我来说，W7 PC] 141px，我设置的容器高度到高度（141px）

你可以看到这是一个工作的例子; http://jsfiddle.net/8pLjfq5u/18/

没有高度报错，该按钮将刚修好自己的容器的高度，在这种情况下是由标题高度设定等

编辑

我会建议反对在这个例子中设置引导类的CSS变化。

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

第二个编辑

这样看来，如果你只是移动的按钮为col-sm-12格，就可以得到想要的结果。

这也可以缩放到移动视图中，不需要需要添加额外的类或css属性。

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

Answer 4

这里有两种可能的问题 - 这取决于你exaclty想达到什么！

（我想这是你正在寻找第二个！）

第一：如果要定位
您在整个页面的右下角更多：

您的position:relative在您的CSS中为.row。

这意味着元素中所有具有类row的元素都将相对于此元素进行定位 - 因此您的阅读内容只能与CSS一起放置（其右侧和底部的负值可以在外部，但仍然可以相对于这个元素）。

二：
如果你想定位您在文章

父元素的右下角更多您#read-more有20px只有高度，因为文字大标题在div上面只有那个高度。
由于您的#read-more元素位于绝对位置，因此不会影响高度。

我试着在#read-more的父元素上设置height: 100%;，但它不起作用。
所以，现在看来，你必须把你的#read-more elemnt其父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> 

Answer 5

有时候你必须对自举的彩车的工作就是让你在找什么，基本上不用它们（拉等）。我已经更新了你的小提琴，我相信它接近你的要求。另一个问题是，由于结果窗口的大小，你的@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>