J'essaie de faire une page Web de CV. J'utilise Bootstrap 4 pour moi avec moi avec un design réactif. Je me débats avec un espacement différents éléments plastiques (div).
J'ai regardé des ressources sur W3schools. J'ai vu que je peux utiliser l'étiquette HTML BR pour créer une nouvelle ligne dans un paragraphe. Cependant, cela n'ajoute pas une nouvelle ligne (espace) entre différents éléments. P>
Voici mon code P>
p>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<p></p>
<p>Some text here. </p>
</div>
</body>
</html>5 Réponses :
Comme vous utilisez Bootstrap, vous pouvez utiliser les utilitaires d'espacement de Bootstrap pour ajouter un espacement où vous avez besoin.
Exemple: strong> p> Changement P> <button type="button" class="btn btn-primary mb-3" data-toggle="collapse" data-target="#demo">
Ajouter CSS personnalisé au document
<style>
#demo{
margin-bottom: 20px;
}
</style>
SO 1ST D'ALL GESTIONNAIRE QUE VOUS APPRENSEZ HTML.
Les problèmes que je vois dans votre code:
Div # Démo est utilisé pour envelopper le texte voir DOC DOCS . Donc, DIV doit être utilisé pour la mise en page de contenu si vous avez besoin d'une enveloppe de texte Utilisez Si vous vérifiez NavirferfableFalues Vous verrez que La chose la plus simple à faire est d'ajouter p (bloc) span (Inline), il y en a plus, mais ils sont les bases. p < / Code> Tag a la marge que vous manquez sur #demo. p autour du 1er paragraphe
Vous pouvez également remplacer la balise vide
avec une balise de ligne
étiquette
J'utilise toujours
. Vous devez utiliser quelques-uns (environ 3 ou 4) pour obtenir un espace entre les éléments.
Vous devez ajouter un remplissage ou une marge inférieure à votre
#demo div.Ainsi utilise
faux pour une raison quelconque?
C'est juste un balisage inutile. Si vous avez fait cela partout où vous auriez du code désordonné. Gardez le balisage aussi petit que possible. Consultez ma réponse ci-dessous pour voir comment ajouter correctement l'espacement (via un rembourrage / marges) à l'aide de bootstrap.
Ce que vous demandez est un peu large. Il suffit d'introduire des éléments comme une solution de contournement pour une autre pause de ligne, c'est certainement une option, mais vraiment dans l'organisation spacienne d'une page est un art tout en soi. Voici quelques lectures de lumière sur le sujet: .com / refactoring-ui / ... .
Une raison supplémentaire de ne pas avoir d'éléments vides est lorsque vous commencez à prendre en compte l'accessibilité Web. L'ajout d'éléments HTML pour la modification de l'affichage pourrait les jeter et provoquer des utilisateurs aveugles / sourds de ne pas pouvoir utiliser votre site avec précision. L'utilisation de CSS personnalisée est une bonne meilleure façon. Vous obtenez l'espace que vous souhaitez en même temps de garder votre HTML propre et accessible.