Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème court bootstrap

Grille qui dépasse de l'écran

Sujet résolu
    14 novembre 2018 à 17:03:36

    Bonjour ! :D

    Je suis actuellement en train de suivre un court intitulé "Prenez en main Bootstrap" mais un moment il propose de créer une entête sur toute la largeur de l'écran et le reste pour grand écran, donc il sort le contenu header de la balise container pour le mettre au-dessus sans container. Quand je fait ça chez moi l'entête "dépasse" de mon écran et s'ajoute une scrollbar en bas de mon écran ! Et pas dans son exemple pourtant j'ai fait tout pareil ! :o

    Image :

    Code html :

    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <title>Bootstrap template</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="style/css/style.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="style/bootstrap/js/bootstrap.min.js"></script>
    
        <header class="row">
            <div class="col-lg-12">
              Entete
            </div>
        </header>
    
        <div class="container">
      
      
            <div class="row">
              <footer class="col-lg-12">
                Pied de page
              </footer>
            </div>
      
          </div>
      </body>
    </html>

    Code CSS :

    body {
        padding-top: 10px;
      }
    
      [class*="col-"], footer {
        background-color: lightgreen;
        border: 2px solid black;
        border-radius: 6px;
        text-align: center;
      }
    
    
      .col-lg-12 { line-height: 80px; 
      }

    Voila :)

    -
    Edité par Gandura 14 novembre 2018 à 17:07:16

    • Partager sur Facebook
    • Partager sur Twitter

    Problème court bootstrap

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown