Sujet Précédent Sujet Suivant

Problème bootstrap débutant d-none et d-*-block

Fermé
Mika - Modifié le 9 nov. 2019 à 12:16
Mika023 Messages postés 1 Date d'inscription dimanche 10 novembre 2019 Statut Membre Dernière intervention 10 novembre 2019 - 10 nov. 2019 à 15:08
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) 
<!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:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
9 nov. 2019 à 12:18
Bonjour,
Je pense que tu dois utiliser : 
d-none d-md-flex

0
Mika
9 nov. 2019 à 15:47
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...
0
Réponse 2 / 2
1Seb Messages postés 166 Date d'inscription dimanche 27 mars 2016 Statut Membre Dernière intervention 30 octobre 2021 37
9 nov. 2019 à 18:43
Bonjour, 

<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>
0
Mika023 Messages postés 1 Date d'inscription dimanche 10 novembre 2019 Statut Membre Dernière intervention 10 novembre 2019
10 nov. 2019 à 15:08
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
0

Discussions similaires

À quoi sert le port common interface sur une TV LCD ?
zharg -
Reguletout -

29 réponses
Disque dur qui ne boot pas: no boot disk has been detected...
Utilisateur anonyme -
Utilisateur anonyme -

9 réponses
minimal bash-like line editing is supported
Mass -
brucine -

1 réponse
Impossible de lire les vidéos de certaines plateformes
John -
Mezda95 -

3 réponses
A java exception has occurred minecraft
moi83310 -
NathLeBg -

14 réponses