J'utilise le CSS bootstrap d'origine, mais avec ce code, mon texte ne s'aligne pas à gauche et à droite. Ils sont juste côte à côte.
<div class="cart_row">
<span class="text-left">Price</span>
<span class="text-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>
.text-left {
text-align: left!important
}
.text-right {
text-align: right!important
}
Qu'est-ce que je fais de mal?
3 Réponses :
span est des éléments en ligne.
Utilisez la classe float-right.
<div class="cart_row"> <span>Price</span> <span class="float-right"><?php echo int_to_format($price); ?> Ft,-</span> </div>
Vérifiez le code en direct ici: https://codepen.io/manaskhandelwal1 / pen / GRJrebW
Vous devez obtenir l'essentiel de css-bootstrap (Grid System avec lignes et largeur)
La classe .pull-left est utilisée pour faire flotter l'élément vers la gauche La classe .pull-right est utilisée pour faire flotter l'élément vers la droite
Créez une ligne avec une largeur donnée, puis créez 2 sections internes séparées par la largeur.
Source: Flottants rapides
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="row col-md-12">
<div class="col-md-3">
<span class="pull-left bg-success">left test1</span>
<span class="pull-right bg-warning">right test1</span>
</div>
<div class="col-md-3">
<span class="pull-left bg-info">left test2</span>
<span class="pull-right bg-danger">right test3</span>
</div>
</div>
</body>
</html>
Vous pouvez l'utiliser en utilisant ses classes flex.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="cart_row d-flex justify-content-between">
<span class="text-left">Price</span>
<span class="text-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>
Oui, je l'ai fait avec flex. Comment puis-je fermer ce message?
Vous ne fermez pas les messages. Vous acceptez la réponse qui résout votre problème. Si vous avez trouvé la solution avant tout le monde, vous pouvez publier votre propre réponse afin que les autres qui trébuchent sur la question connaissent la bonne solution.
une étendue est un élément en ligne et, en tant que tel, l'alignement du texte ne fonctionnera pas dessus (car l'élément a la taille du texte à moins qu'il ne soit enveloppé). classes) ou faites simplement fléchir le parent avec un espace de contenu justifié entre