J'essaie de créer des cartes de bootstraps qui vont représenter des produits de commerce électronique. Chacune des cartes va être un produit et j'ai besoin de mettre un bouton "Ajouter au panier" à côté du titre de la carte.
Voici ce que j'ai actuellement: P>
<div class="card">
<div class="card-body">
<h5 class="card-title"><%= "#{product.name.capitalize} %></h5>
<%= button_to products_path(:pid => p.id), :class => 'btn btn-default' do %>
Add to cart
<% end %>
</div>
<p class="card-text">This is the product description.</p>
</div>
3 Réponses :
Essayez d'envelopper le titre et le bouton dans le même DIV (ou H5 si vous en avez besoin) et ajoutez du float-droit au bouton:
<div class="card">
<div class="card-body">
<div class="card-title"><%= "#{product.name.capitalize} %>
<%= button_to products_path(:pid => p.id), :class => 'btn btn-default float-right' do %>
Add to cart
<% end %>
</div>
</div>
<p class="card-text">This is the product description.</p>
</div>
J'ai bien peur que cela n'ait eu aucun effet sur l'alignement.
J'ai eu une faute de frappe dans mon code, je voulais utiliser le flotteur, avez-vous attrapé cela?
Ouais. Avancer avec une approche de non-carte, mettez simplement le chariot à côté du texte normal pour le moment où le précédent semblait impossible!
J'utiliserais Position: relative; dans le conteneur extérieur (carte de classe), puis Il est important de définir la position: relatif; à la carte. Sinon, la position absolue serait relative au corps complet, pas l'élément de carte. quelque chose comme ce jsfiddle. La classe "carte" doit être le conteneur extérieur et la classe "interne" la classe de votre bouton.
bootstrap 4 classes uniquement strong> Peut-être que vous pouvez utiliser cette structure pour insérer votre bouton là-bas? Fondamentalement, il suffit de faire tourner le titre à l'intérieur d'un autre conteneur avec le bouton et a fait une flexbox p> p>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/200x120" alt="Card image cap">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Card title</h5>
<button type="button" class="btn btn-success">Primary</button>
</div>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Merci. Pour une raison quelconque, alors que cela fonctionne en soi, en le mettant à mes rails, ce n'est pas le cas. J'ai essayé de supprimer chaque code CSS que je dois m'assurer que cela n'interfère pas avec cela mais ne fonctionne toujours pas.
Hmm ... Pouvez-vous poster le balisage que vous voyez après que la page soit rendue avec le code que vous avez montré? Peut-être qu'il y a quelque chose qui se passe là-bas
Ne sais pas vraiment sur les rails, mais j'ai regardé cela et je voulais demander si la syntaxe que vous utilisez est correcte: APIDOCK.com/Rails/actionView/HELPERS/FORMTAGHELER/BUTTON_TA G