bootstrap 4 alignement horizontal de la bascule échoue

J'utilise un élément à bascule de Material Design Lite dans ma structure Bootstrap 4 et je suis incapable d'aligner l'élément sur le côté droit de la colonne. Notez que la classe "float-right" fonctionne très bien pour l'élément Bootstrap (bouton). J'ai aussi essayé d'appliquer la classe "text-right" au container, ainsi que justify-content-end, justify-content: flex-end, pull-right, etc ... rien ne fonctionne.bootstrap 4 alignement horizontal de la bascule échoue

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 1</div> 
 
     <div class="col-4 float-right"> 
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1"> 
 
      <input type="checkbox" id="switch-1" class="mdl-switch__input float-right" checked> 
 
      </label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 2</div> 
 
     <div class="col-4 float-right"> 
 
     <button type="button" class="btn btn-primary float-right">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body>

Comment puis-je aligner l'élément sur le côté droit de la colonne? Pour le contexte, je suis en train d'obtenir une disposition similaire aux réglages en chrome (texte aligné à gauche, bascule aligné à droite):

Source

2017-09-13 tealowpillow

MD utilise comme écrit, tirez-droite, tirer droit ne flotte pas http://rosskevin.github.io/bootstrap-material-design/components/utilities/ – mlegg

ne fonctionne pas non plus . – tealowpillow

Avec une règle CSS, vous pouvez l'obtenir déplacé vers la droite. Parce qu'il flotte, vous devrez jouer avec le rembourrage pour l'aligner correctement. Une autre option serait de mettre les contrôles dans un div.col-1 et de leur donner moins d'espace pour se déplacer.

label.mdl-switch { width: auto !important; }

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 1</div> 
 
     <div class="col-4 float-right"> 
 
     <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1"> 
 
      <input type="checkbox" id="switch-1" class="mdl-switch__input" checked> 
 
      </label> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-8">Text row 2</div> 
 
     <div class="col-4 float-right"> 
 
     <button type="button" class="btn btn-primary float-right">Submit</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-09-13 23:26:04 miken32

merci! mais je ne suis pas tout à fait la raison pour laquelle "largeur: auto" le tire soudainement vers la droite? pourquoi le bouton a-t-il été aligné à droite avec 'float-right' et la bascule alignée à gauche? – tealowpillow

L'élément généré n'hérite pas de la règle 'float: right' que vous avez définie, et il spécifie' width: 100% 'de sorte qu'il soit aligné à gauche et occupe toute la largeur de' div.col-4'. Le bouton est juste un '

bootstrap 4 alignement horizontal de la bascule échoue

Répondre

Questions connexes