Comment déplacer le bouton en bas à droite de div avec bootstrap?

Je suis en train de construire un site web en utilisant Bootstrap et je vais maintenant essayer de faire quelque chose comme ceci:

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

Le problème est que je ne peux pas aligner le ReadMore bouton vers le bas. J'ai essayé en utilisant les conseils dans cette SORTE de réponse, mais en vain. J'ai créé un le violon de mon code ici et je vais coller mon code ci-dessous.

Quelqu'un sait ce que je fais de mal? Tous les conseils sont les bienvenus!

Mon code HTML ressemble à ceci:

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

et mon css:

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

Une mise à jour sur laquelle vous avez essayé, qui a travaillé, qui n'a pas etc?
Quelle est la version de bootstrap?

InformationsquelleAutor kramer65 | 2015-04-08

Essayez ceci:

CSS:

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

HTML:

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

Voici un violon

Est-il à ce que vous recherchez?

InformationsquelleAutor chiapa

Parfois, vous avez à travailler contre bootstrap de la flotte pour obtenir ce que vous cherchez, essentiellement en raison de leur non-utilisation (tire, etc). J'ai mis à jour votre violon, et je crois que c'est proche de ce que vous demandez. Une autre question a été votre @media jetait des choses en raison de la taille de la fenêtre de résultat.

Mis À Jour Le Violon

CSS:

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

HTML:

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

InformationsquelleAutor cboler

0

Il y a deux problèmes ici - selon ce exactement que vous voulez atteindre!

(Je suppose que c'est la deuxième personne que vous cherchez!)

Première:

si vous souhaitez positionner votre lire plus dans le coin inférieur droit de la page entière:

Vous avez position:relative dans votre CSS pour .row.

Cela signifie que tous les éléments à l'intérieur d'un élément avec la classe row sera positionné par rapport à cet élément - de sorte que votre lire plus ne peut être placé à l'intérieur avec votre CSS (avec des valeurs négatives pour la droite et en bas, il peut être à l'extérieur, mais toujours par rapport à cet élément).

Deuxième:

Si vous souhaitez positionner votre lire plus à la le coin en bas à droite de l'article

Le parent de l'élément de votre #read-more a seulement de la hauteur de 20px, parce que le texte Grand Titre dans le div ci-dessus est seulement de cette hauteur.

Comme votre #read-more élément en position absolue, elle ne contribue pas à la hauteur.

J'ai essayé de réglage height: 100%; sur l'élément parent de #read-more, mais il ne fonctionne pas.

Donc, il semble, vous devrez mettre votre #read-more elemnt à l'extérieur de son parent div, directement dans l'article, comme ceci:
```
<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>
```
InformationsquelleAutor Badenlebt
0

Cela est dû à la droite de l'écran seulement de la hauteur du contenu, dans ce cas, le titre et le bouton.

Pour contrer cela, vous devez définir une hauteur.

J'ai ajouté de la classe box-height pour le html et, comme l'image semble à max à 141px [Au moins pour moi, W7 PC], j'ai réglé la hauteur du conteneur à la hauteur (141px)

Vous pouvez voir un exemple ici; http://jsfiddle.net/8pLjfq5u/18/

Sans la hauteur, le bouton va juste se fixer à la hauteur du conteneur, qui dans ce cas est défini par le titre de la hauteur etc.

Modifier

Je ne vous le conseille paramètre css changements dans le bootstrap classes dans cette instance.

À un certain point, que le changement de la base de CSS va vous mordre dans le derrière, quand vous en avez besoin pour travailler comme prévu dans la version d'origine.

Deuxième Édition

Il semblerait que si vous déplacez simplement le bouton dans un col-sm-12 div, que vous pouvez obtenir le résultat souhaité.

Présente également des échelles en vue de téléphone portable aussi, sans la nécessité d'ajouter des classes ou des attributs css.

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

InformationsquelleAutor MrMarlow
0

J'ai ajouté "col-xs" classes à votre balisage et il a généré le type d'affichage désiré basé sur ce que vous avez montré dans votre question
```
<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>
```
Si vous branchez dans votre violon il affiche la façon dont vous voulez avec votre requête de média. Lorsque vous avez vraiment le rétrécir si elle est assez illisible à ce point.

Peut-être que vous souhaitez ajuster la requête de média pour afficher différemment pour "sm" et "xs".

InformationsquelleAutor HisPowerLevelIsOver9000

Vous devez vous connecter pour publier un commentaire.