web-dev-qa-db-fra.com

Bootstrap: comment "coller" un bouton sur une image lors du redimensionnement

J'ai une image dans laquelle j'ai besoin de mettre un bouton, le problème est que je ne sais pas comment placer le bouton, la redimensionner et la positionner automatiquement lorsque le navigateur est plus petit, maintenant j'ai le bouton en place , mais lorsque je redimensionne le navigateur pour réduire les déplacements de boutons, j’essaie d’utiliser des pourcentages dans l’achat css 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;

 }
htmlcsstwitter-bootstraptwitter-bootstrap-3
6
elunap

Ah, la bonne vieille question "comment superposer trucs" sur une image sensible - sensible -.

Un peu délicat, mais pas trop mal. Le problème est de savoir comment rendre la position verticale les choses sensible lorsque la taille de l’image change.

Ne craignez rien, voici un moyen simple de le faire:

 responsive image with button

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 pseudo-classe img-overlay:before gère le travail de positionnement vertical en abaissant la division img-overlay à partir du haut de l'image. Dans cet exemple, le haut du bouton sera toujours à 50% de l'image (changez l'attribut height: 50% si vous voulez que le bouton soit plus haut ou plus bas).

jsfiddle

Pour que le bouton size _ soit sensible à la largeur de la fenêtre, vous pouvez créer une nouvelle classe pour votre bouton. Appelons-le btn-responsive (cela remplace btn-md dans l'exemple ci-dessus). Utilisez ensuite les requêtes @media pour ajuster les attributs btn-responsive en fonction de la largeur de la fenêtre. Quelque chose comme ça:

.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 d'autres largeurs d'écran.

18
terrymorse

Je dois demander s'il est possible de remplacer une étiquette de formulaire dans une autre DIV? Ensuite, vous pouvez simplement utiliser position: absolute pour le bouton. J'ai créé le violon pour montrer comment https://jsfiddle.net/1x1pjwk7/

0
Alex Todef