Bootstrap: Comment “coller” un bouton sur une image lors du redimensionnement

J'ai une image dans laquelle j'ai besoin de mettre un bouton au dessus, le problème est que je ne sais pas comment placer le bouton et automatiquement ré-la taille et la position lors de la prise de navigateur les plus petits, à droite maintenant, j'ai le bouton en place, mais quand je re-taille du navigateur afin d'obtenir de petites le bouton se déplace, j'ai essayé à l'aide de pourcentages dans le css acheter ne fonctionne pas, que puis-je faire?

<div id="discover" class="container-fluid">
<div class="row-fluid"> 
  <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
    <img id="discoveryour" src="img/x.png" class="img-responsive">
  </div>  
</div>
<div class="row-fluid"> 
  <div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form> 
</div>
</div>
</div>

Css:

  .withimg {
  width: 100%;
  overflow:hidden;
  padding: 0px;
  margin: 0px;
 }

  #discover{
  position: relative;  
 }

#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;

 }

Je pense que vous devriez utiliser JQuery pour elle.
Vous avez certainement pu utiliser JQuery pour bouton de réglage de la position et de la taille, mais il n'est pas nécessaire. Un peu de CSS va faire le tour bien.

OriginalL'auteur elunap | 2016-02-26

19

Ah, le bon vieux "comment la superposition de trucs sur le haut d'une image réactive -- en tenant compte" de la question.

Un peu difficile, mais pas trop mauvais. Le problème est de savoir comment faire la trucs du position verticale réactive lorsque la taille de l'image change.

N'ayez pas peur, voici une façon simple de le faire:

HTML:
```
<div class="img-wrapper">
    <img class="img-responsive" src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
    <div class="img-overlay">
      <button class="btn btn-md btn-success">Button</button>
    </div>
</div>
```
CSS:
```
.img-wrapper {
  position: relative;
 }

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}
```
La img-overlay:before pseudo-classe gère le positionnement vertical de l'emploi en poussant le img-overlay div vers le bas à partir du haut de l'image. Dans cet exemple, la partie supérieure du bouton sera toujours de 50% de l'image (modifier la height: 50% attribut si vous souhaitez que le bouton supérieur ou inférieur).

jsfiddle

Faire sur le bouton taille sensible à la largeur de la fenêtre, vous pouvez créer une nouvelle classe pour votre bouton. Appelons ça de la btn-responsive (cela remplace btn-md dans l'exemple ci-dessus). Ensuite, utilisez @media requêtes pour régler le btn-responsive attributs pour les différentes largeurs de fenêtre. Quelque chose comme ceci:
```
.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) { 
    /* matches 'btn-xs' */
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}
```
et ainsi de suite pour les autres largeurs d'écran.

Dans quelques années à partir de maintenant, lorsque nous sommes tous morts, je serais debout à Saint-Pierre de la porte, et il me souhaiter la bienvenue dans le Paradis, alors bien sûr qu'il allait me demander si je veux rencontrer quelqu'un de spécial, comme Gandhi ou peut-être que Mère Teresa, à ce moment, je le voyais dans les yeux et lui dire: "merci Saint-Pierre, mais je préfère voir quelqu'un qui est en fait un saint, prends-moi avec terrymorse, j'ai besoin de "high five " cet homme". Donc oui, c'était tellement bien expliqué, et si bon, merci beaucoup!!!, Je vais vous voir de l'autre côté.

OriginalL'auteur terrymorse
0

J'ai demander s'il y a une possibilité de remplacer la balise de formulaire dans un autre DIV? Ensuite, vous pouvez simplement utiliser position: absolute pour le bouton. J'ai créé violon pour montrer comment https://jsfiddle.net/1x1pjwk7/

Essayé cela, mais le bouton se déplace encore sur la re-dimensionnement :/
avez-vous résolu ce problème? comme j'ai le même problème je voudrais savoir
Ouais, découvrez la réponse de Terry Morse, il a vraiment aidé mon

OriginalL'auteur Alex Todef

Vous devez vous connecter pour publier un commentaire.