Je place des éléments sur ma carte comme ceci (exécuter l'extrait de code):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="px-4 clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card">
<div class="card-header clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card-body">
Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.
Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
</div>
</div>
</div>
Maintenant, je veux faire apparaître ces éléments sur la même indentation que le contenu de la carte mais sans utiliser de CSS personnalisé. Notez que l'utilisation de p-3 ou px-3 ou p-4 et px-4 sont légèrement différents indentations:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card">
<div class="card-header clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card-body">
Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.
Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
</div>
</div>
</div>
J'ai d'abord pensé à mettre les éléments dans une carte elle-même, mais ensuite je devrais utiliser un css personnalisé pour rendre le corps de la carte transparent.
Y a-t-il un composant ou un utilitaire de mise en page qui a exactement le même remplissage que le composant de la carte?
3 Réponses :
Vous pouvez essayer comme ça, bien que ce ne soit pas une bonne pratique
<div class="card-header bg-transparent py-0 border-bottom-0 clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
Malheureusement, les utilitaires de remplissage ne fonctionneront pas seuls puisque la carte a 1.25rem padding, et les utils de remplissage vont de 1rem à 1.5rem . Voici quelques options de contournement ...
Option 1:
Vous pouvez utiliser px-3 ( 1rem code >) plus une seule marge: mx-1(.25rem):
<div class="container mt-4">
<div class="px-3">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card">
<div class="card-header px-3 clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card-body px-3">
..
</div>
</div>
</div>
Notez qu'il reste 1 pixel de chaque côté car la carte a une bordure de 1px . Pour contourner ce problème, vous devez ajouter une bordure invisible sur le contenu supérieur (par exemple: )
Option 2:
Ou remplacez les card-header et card-body par px-3 (ou px-4 ) pour correspondre au remplissage du contenu supérieur, ce qui les rend tous identiques ...
<div class="container mt-4">
<div class="px-3 mx-1 clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card">
<div class="card-header clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card-body">
...
</div>
</div>
</div>
Oui, vous pouvez combiner les classes suivantes mx-1 px-3 border border-white :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="mx-1 px-3 clearfix border border-white">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card">
<div class="card-header clearfix">
<span class="float-right">right</span>
<span>left</span>
</div>
<div class="card-body">
Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.
Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
</div>
</div>
</div>