Bootstrap 3 Grid: Responsive Position Absolute Bottom Width Ausgabe

Question

Ich muss ein Element am unteren Rand eines Containers positionieren, der das Bootstrap-Gitter verwendet.

Das Problem, das ich habe, ist, dass der Anker außerhalb der übergeordneten Breite erstreckt. Ich brauche den Anker, um 100% zu überspannen und innerhalb der Breite des Elternteildiv content-wrapper zu bleiben.

Ich muss die 15px Polsterung auf jeder Seite der Schaltfläche, die aus dem übergeordneten Container kommt.

ist hier ein Screenshot der Ausgabe:

HTML:

<div class="content-wrapper col-xs-12"> 
    <div class="content"> 
    <a class="button" href="#">See more</a> 
    </div> 
</div> 

CSS:

.content-wrapper { 
    width: 100%; 
    height: 450px; 
    background-color: gray; 
    position: relative; 
} 

.button { 
    display: block; 
    background: black; 
    width: 100%; 
    text-align: center; 
    height: 50px; 
    padding-top: 13px; 
    position: absolute; 
    bottom: 0; 
} 

Hier ist ein JSFIDDLE das Problem in Aktion zu sehen.

Answer 1

Ich habe hinzugefügt row Klasse und container-fluid Klasse über Ihre HTML-Struktur zusammen mit einigen CSS Änderungen. Die Klasse container-fluid funktionierte nicht mit dem Import-Bootstrap. also habe ich es zusätzlich im HTML-Teil als Referenz hinzugefügt.

Durch diese Änderungen können Sie das gewünschte Ergebnis mit 15px Lücke wie oben erwähnt mit Standard-Bootstrap-Struktur erreichen.

Hier ist der Arbeitscode lautet:

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
/* @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); */ 
 

 
.content-wrapper { 
 
    width: 100%; 
 
    height: 450px; 
 
    background-color: gray; 
 
} 
 
.content { 
 
    display: inline-block; 
 
    width: 100%; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.button { 
 
    display: block; 
 
    background: black; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 50px; 
 
    padding-top: 13px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 

 
<div class="content-wrapper col-xs-12"> 
 
    <div class="content"> 
 
    <a class="button" href="#">See more</a> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

Answer 2

Fügen Sie einfach left:0 zu Ihrer .button Klasse

.button { 
    display: block; 
    background: black; 
    width: 100%; 
    text-align: center; 
    height: 50px; 
    padding-top: 13px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}