2013-03-14 16 views

risposta

7

provare qualcosa di simile

<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a> 
0

Utilizzare giustificare-content-end

Dalla documentazione di bootstrap, che dice:

Bootstrap 3 usato .navbar-left e .navbar-right per l'allineamento della barra di navigazione.

Bootstrap 4 utilizza le varie classi di supporto.

(parte Alignment) https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm

e qui maggiori informazioni sul nuovo allineamento https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm

<!DOCTYPE html> 
<html> 

<head> 
<link rel="stylesheet" href="style.css"> 
<script src="script.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</head> 

<body> 

    <style> 
    .wrapper { 
     display: flex; 
     align-items: center; 
     background-color: beige; 
     height: 100vh; 
    } 

    .wrapper > div { 
     padding: 20px; 
     font-size: 4vw; 
     color: white; 
    } 

    .red { 
     background: orangered; 
    } 

    .green { 
     background: yellowgreen; 
    } 

    .blue { 
     background: steelblue; 
    } 

    body { 
     margin: 0; 
    } 
    </style> 
    <div class="wrapper justify-content-end"> 
    <div class="red">1</div> 
    <div class="green">2</div> 
    <div class="blue">3</div> 
    </div> 
</body> 

</html> 

https://plnkr.co/edit/LtfW2fj9f3E9Ehj1M8jN?p=catalogue

Problemi correlati