2017-08-25 2 views
0

J'ai fait un bouton personnalisé et souhaite l'utiliser comme bouton de barre de navigation, et faire en sorte que le bouton reste sur le haut droit de l'écran tout en étant réactif pour le mobile, toutes les solutions trouvées. mais ce n'est pas réactif mobile, j'ai essayé de tirer sur la classe droite, mais cela ne fonctionne que lorsque je suis sur le haut de l'écran et non réparé. tant que j'applique la position fixe, il va à la gauche de l'écran, l'utilisation à gauche ou à droite ne fonctionnera pas si je le veux mobile réactif. de toute façon pour résoudre cela?Comment faire pour que le bouton reste sur l'écran supérieur droit et reste mobile avec Bootstrap 3?

Répondre

0

Comme les autres ont dit:

top: 0; 
right: 0; 

travail ..should bien. Aussi, c'est une bonne idée de lier un violon. Si vous voulez qu'il reste mobile resposive, il suffit de l'inclure dans la grille d'amorçage.

Fait ce fiddle

0

essayer d'appliquer ci-dessous css

.customButton{ 
    top : 0; 
    right : 0; 
    position: fixed; 
} 

+0

il est juste allé vers la gauche de mon écran – SilvarCraw

0

Just Try et échouer et résolu. Il suffit de l'emballer avec un élément div ou un autre élément, et d'appliquer le flotteur div à droite et un peu de rembourrage j'ai obtenu mon jeu de boutons.

<div style='float:right;'> 
    <button style='position:fixed;'></button> 
</div> 
0

Il vous allez

<input type="button" style="position:fixed; top:0px; right:0px;" /> 
0

Pour navbars Bootstraps fournit des classes spéciales si vous voulez la barre de navigation à fixer. Utilisez ".navbar-fixed-top" de https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top

Le flottement peut être fait avec le ".pull-right" comme vous l'avez dit, ou avec ".navbar-left". Aussi, vous devez faire attention à ce que vous mettez dans la zone ".collapsed". Parfois, vous devrez peut-être dupliquer certains liens pour les vues mobiles et de bureau. Vous pouvez également utiliser les classes responsive, comme ".hidden-xs", etc. voir https://getbootstrap.com/docs/3.3/css/#responsive-utilities