如何通過引導將按鈕移動到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>