Comment puis-je supprimer l'espace supplémentaire dans les cartes bootstrap 4
fael_
Alors j'ai perdu la tête en essayant de comprendre ça. Je n'arrive pas à faire les cartes centrées horizontalement dans cette section et quand j'ai vérifié inspecter les éléments, il s'avère que les cartes occupent un espace supplémentaire qui n'est pas vraiment un remplissage ou une marge. Besoin d'aide sur celui-ci. J'ai simplement utilisé la grille bootstrap et le but est d'obtenir les cartes également centrées horizontalement.
#products
{
@include sectionDefaultValues();
#products-txt-cont
{
background-color: $siteColor;
padding: 15px;
}
#products-txt
{
color: white;
}
}<section id="products">
<div id="products-txt-cont">
<h2 id="products-txt">PRODUCTS AND SERVICES</h2>
</div>
<div class="container3">
<div class="row">
<div class="col col-4">
<div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalone">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="modal" tabindex="-1" role="dialog" id="modalone">
<div class="modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col col-4">
<div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modaltwo">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="modal" tabindex="-1" role="dialog" id="modaltwo">
<div class="modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col col-4">
<div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalthree">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="modal" tabindex="-1" role="dialog" id="modalthree">
<div class="modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> fael_
Je l'ai figuré LOL, je devais juste ajouter la classe 'mx-auto' aux cartes
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
modifier le
Articles connexes
TOP liste
- 1
Redirection HTTP vers HTTPS dans Java à l'aide de HTTPURLConnection
- 2
Uncaught TypeError: map n'est pas une fonction dans Reactjs avec Firebase
- 3
Laravel SQLSTATE [HY000] [1049] Base de données inconnue 'previous_db_name'
- 4
Comment envoyer plusieurs variables de la lame au contrôleur
- 5
Microsoft.WebApplication.targets
- 6
Comment analyser un fichier avec un tableau d'objets JSON en utilisant Node.js?
- 7
Comment définir du texte dans un QLabel et afficher les caractères '<>'?
- 8
Concaténer des variables dans ansible
- 9
Filtrer les données en fonction des conditions d'une trame de données
- 10
Échec de l'exécution de 'insertBefore' sur 'Node': le paramètre 1 n'est pas de type 'Node'
- 11
ESP8266 HADRWARE MINUTERIE, USA pour cocher une macro étrange
- 12
Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?
- 13
Comment centrer un div tout en utilisant la transition et transformer avec l'échelle
- 14
Stop jQuery execution after one time execution
- 15
obtenir le nombre de marqueur affiché sur la carte
- 16
System.Data.SqlClient.SqlException: 'Nom de colonne non valide' ApplicationRoleId '.'
- 17
Générer une variable binaire avec une corrélation prédéfinie avec une variable déjà existante
- 18
comment afficher un bouton au-dessus d'un autre élément ?
- 19
Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs
- 20
php ajouter et fusionner des données de deux tables
- 21
Comment utiliser le stockage local et le supprimer lorsqu'il n'est pas nécessaire
laisse moi dire quelques mots