J'ai essayé de donner toute la longueur de div. Mais le bouton n'a pas pu obtenir la pleine longueur. Aidez-moi s'il vous plaît à résoudre les erreurs. 
7 Réponses :
Parce que dans Bootstrap, la colonne a Démo: P> P> Padding-droite: 15px; Code> et Padding-gauche: 15px; code> Par défaut. Donc, si vous voulez que votre bouton puisse obtenir la largeur complète de la colonne, vous pouvez écraser ces CSS ou ajouter le CSS ci-dessous à votre bouton:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="block" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Essayez de mettre à jour CSS:
<div class="col-md-6 col-sm-6 text-center card">
Toutes les colonnes de bootstrap ( Si le bouton est le seul élément enfant de cette colonne et que vous ne souhaitez pas remplacer les styles de la classe, vous pouvez utiliser le .col - * ) ont un padding-x ( padding-droit: 15px; et Padding-gauche: 15px; ) Par défaut. px-0 ou p-0 classe sur la colonne pour remplacer le remplissage de seul cette colonne:
Utiliser l'affichage: Inline-Block dans "Span" et suivant "Div" tag.
Retirez le rembourrage sur la colonne DIV:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card{ padding:0px}
</style>
</head>
<body>
<script src="script.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<!-- <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px"> -->
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
</body>
</html>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>Utilisez simplement un remplissage zéro.
<div class="col-md-3 col-sm-6 text-center card px-0" style="padding: 0px ">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#classRoutine" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Ajouter
largeur: 100% àBlock classe ou comme style dans le bouton.Ce n'est pas du travail. Et la classe de boutons soit BTN BTN-primaire.
Ajoutez ceci:
.Card {Padding: 0PX}