Problème bootstrap débutant d-none et d-*-block
Mika
-
Mika023 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
Mika023 Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je pose ma question ici en dernier espoir car, après avoir chercher pendant assez longtemps, je n'ai trouvé personne pour m'aider (bien que ça doit être simple, je ne suis qu'un débutant :/)
Je voulais faire disparaître mon titre lors du passage en médium et j'ai utilisé d-md-block et block-none.
Le problème c'est que l'effet recherché ne s'effectue qu'en sm et qu'en md, mon titre prend l'équivalent de 12 cases...
Voici mon code: (je ne trouve pas le html, que xhtml, déso)
et css:
EDIT : Ajout des BALISES DE CODE
Voilà, désolé d'avoir déranger et j'espère que vous pourrez m'aider. :(
Je pose ma question ici en dernier espoir car, après avoir chercher pendant assez longtemps, je n'ai trouvé personne pour m'aider (bien que ça doit être simple, je ne suis qu'un débutant :/)
Je voulais faire disparaître mon titre lors du passage en médium et j'ai utilisé d-md-block et block-none.
Le problème c'est que l'effet recherché ne s'effectue qu'en sm et qu'en md, mon titre prend l'équivalent de 12 cases...
Voici mon code: (je ne trouve pas le html, que xhtml, déso)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test1.css">
<title>Test1</title>
</head>
<body>
<div class="container-fluid no-padding">
<div class="row entete no-padding">
<div class="col-lg-2 d-none d-md-block"><img src="images/logo1.png" class="logo_entete" alt=""><strong>No Limit</strong></div>
<div class="col-lg-6 hidden-sm-block"></div>
<div class="col-lg-1 col-md-4 menu col-md-4">Accueil</div>
<div class="col-lg-1 col-md-4 menu col-md-4">Profil</div>
<div class="col-lg-1 col-md-4 menu col-md-4">Contact</div>
<div class="col-lg-1 d-none d-md-block"></div>
</div>
<div>
</div>
<section class="section1">
<div class="banniere row">
<div class="col-lg-12 banniere_background">
<video src="images/video_bg2.mp4" autoplay="autoplay" muted="muted" class="video_banniere" loop="loop"></video>
</div>
</div>
<div class="title_banniere_div"><div class="title_banniere_div2"><h1 class="title_banniere">Browse.<br>Choose.<br>Customize.</h1></div></div>
<div class="under_banniere"></div>
</section>
<section>
<div>
<div></div>
<div></div>
<div></div>
</div>
</section>
<footer>
</footer>
</div>
</body>
</html>
et css:
/*color:
rgb(218, 220, 224) --> font
rgb(248, 249, 251) --> background
rgb(94, 98, 103) --> menu hover
*/
body
{
margin: 0;
padding-right:0;
padding-left:0;
color: rgb(179, 179, 179);
background-color: rgb(248, 249, 251);
}
.no-padding > [class*='col-']
{
padding-right:0;
padding-left:0;
}
.entete
{
border-bottom: 1px rgb(218, 220, 224) solid;
box-shadow: 3px 0px 3px rgb(218, 220, 224);
line-height: 50px;
width: auto;
padding: 0;
margin: 0;
margin: 0 -1.1%;
background-color: white;
}
[class*="col-"]
{
text-align: center;
padding: 0;
}
.col-lg-offset-1
{
margin-left: 8.33333333333%;
}
.col-lg-offset-5
{
margin-left: 41.6666666667%;
}
.logo_entete
{
max-width: 20%;
margin-right: 3%;
}
.menu:hover
{
color: rgb(94, 98, 103);
cursor: pointer;
}
/*bannière*/
.banniere
{
max-height: 300px;
overflow: hidden;
}
.video_banniere
{
width: 100%;
}
.section1
{
position: relative;
}
.title_banniere_div
{
position: absolute;
transform: translateY(-50%);
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.title_banniere
{
color: white;
z-index: 1;
margin: auto;
}
.under_banniere
{
min-height: 20px;
background-color: white;
margin: 0 -1.1%;
border-bottom: 1px rgb(218, 220, 224) solid;
box-shadow: 3px 0px 3px rgb(218, 220, 224);
}
.d-none
{
display: none;
}
EDIT : Ajout des BALISES DE CODE
Voilà, désolé d'avoir déranger et j'espère que vous pourrez m'aider. :(
A voir également:
- Bootstrap d none
- Si ne qua none - Télécharger - Calcul & Conversion
- Display none ✓ - Forum Webmastering
- Problème Bootstrap - Forum Créer un site
- Carousel bootstrap ✓ - Forum Javascript
- Bootstrap : responsive - Forum CSS
2 réponses
Bonjour,
Je pense que tu dois utiliser :
Je pense que tu dois utiliser :
d-none d-md-flex
Mika
Merci jordane pour ta réponse, mais il semble malheureusement que le problème persiste: le titre reste affiché en md mais est juste en mode flex...
Bonjour,
Ou
<div class="d-none d-lg-block">Cacher sur tous les écrans plus petits que lg</div>
Ou
<div class="d-md-none d-lg-block">Caché seulement sur md</div>
Merci beaucoup pour ta réponse Seb1, mais je pense avoir mal exprimer mon problème, maintenant que je me suis inscris en tant que membre, je peux te montrer via l'image ci-suit:
Mon titre, "No Limit" est censé disparaître une fois passé en médium... Il n'en est rien et c'est la raison pour laquelle je pose ma question :(
Merci de m'avoir aidé en tout cas et, si vous trouvez le problème, je serai heureux de lire la solution. :D
Mon titre, "No Limit" est censé disparaître une fois passé en médium... Il n'en est rien et c'est la raison pour laquelle je pose ma question :(
Merci de m'avoir aidé en tout cas et, si vous trouvez le problème, je serai heureux de lire la solution. :D
