jumbotron en bootstrap

185711
,

Bonjour,

Je suis la formation du site pour apprendre le PHP, j'ai envie d'avoir un truc "pas trop mal" au fur et à mesure et également je teste au fur et à mesure des excercices des choses en plus. J'essaie d'avoir pour cela un "site" responsive qui ressemble à quelque chose. J'utilise bootstrap car j'aime bien ces "classes".

Le principal souci est dans le jumbotron, je trouve qu'il ne rend pas bien en mobile avec le texte en partie visible.

Je pense que mon erreur vient de l'alignement du jumbotron, j'ai l'impression que je ne vois pas le haut.
J'ai essayé de mettre une marge mais cela ne fonctionne pas.

<style>
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .jumbotron {

background-size: cover;
height: 70%;}
}

  body{font-family: 'Inria Serif', serif;}

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
</style>





CQDQ


      <div class="collapse navbar-collapse" id="navbarsExample07XL">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.php">Accueil <span class="sr-only">(current)</span></a>
          </li>

          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownblague" data-toggle="dropdown" aria-expanded="false">fdsfds</a>
            <div class="dropdown-menu" aria-labelledby="dropdownblague">
              <a class="dropdown-item" href="1.php">1</a>
              <a class="dropdown-item" href="2.php">1</a>
              <a class="dropdown-item" href="3.php">3</a>
            </div>
          </li>
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownblague" data-toggle="dropdown" aria-expanded="false">fdsfds</a>
              <div class="dropdown-menu" aria-labelledby="dropdownfail">
                <a class="dropdown-item" href="11.php">1</a>
                <a class="dropdown-item" href="12.php">2</a>
                <a class="dropdown-item" href="13.php">3</a>
              </div>
          </li>   
          <li class="nav-item dropdown active">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownblague" data-toggle="dropdown" aria-expanded="false">fdsfds</a>
            <div class="dropdown-menu" aria-labelledby="dropdownrecit">
                <a class="dropdown-item" href="21.php">1</a>
                <a class="dropdown-item" href="22.php">2</a>
                <a class="dropdown-item" href="23.php">3</a>
            </div>
          </li>



          </ul>

        <form class="form-inline">
           <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Chercher</button>
        </form>
        <a class="nav-link active text-white" href="Connection.php"> <i class="far nav-item fa-user-circle"></i> Se connecter</a>
      </div>
    </div>
</nav>

  <main role="main" class="container">
  <div class="jumbotron" style="background-image: url(img/fondjumbo.jpg); background-size: 100%;">
      <h1 class="text-white">CQDC</h1>
<p class="lead text-white">mon slogan</p>


2 Réponse

185711
,

Bonjour,

J'ai trouvé une "solution", je suis pas mécontent du résultat . Par contre le corps du site ne semble pas prendre la totalité de la largeur, comme si il manquait 1 cm avez vous déjà constaté cela?

Default
,

Précise un margin et padding à 0 sur le body :)