Bootsrap ist nicht richtig anzeigen-Elemente wie Jumbotron scheint nicht zu funktionieren

Ich sah um und ich glaube, ich verwende richtig das Jumbotron-Element, aber aus irgendeinem Grund funktioniert Bootstrap nicht richtig. Ich habe versucht, kopieren & Einfügen eines Arbeits-Jumbotron von einer anderen Seite und es funktioniert hier nicht. Die Bootstrap CSS-Datei ist korrekt verbunden, da col-sm-6 ordnungsgemäß funktioniert. Danke im Voraus!Bootsrap ist nicht richtig anzeigen-Elemente wie Jumbotron scheint nicht zu funktionieren

P.S. style.css ist eine leere CSS-Datei

<!DOCTYPE html> 
<html lang="es"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Lorem</title> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <meta name="author" content=""> 

    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="./css/style.css"> 
    <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css"> 
    <link rel="stylesheet" type="text/css" href="./css/normalize.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </head> 

    <body> 
    <header></header> 
    <div class="jumbotron login_main" > 
     <div class="col-sm-6 vertical-center"> 
      <h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
      <h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2> 
     </div> 
     <form> 
      <p>hello</p> 
     </form> 
    </div> 
    <footer> 

    </footer> 
    </body> 
    </html>

Quelle

2016-05-26 Luigi

Wie sieht es aus? Wie erwartest du, dass es so aussieht? Hat die andere Seite zusätzliches CSS? – Alex

Sie müssen in Ihrem Markup eine Zeilenklasse haben (vor 'col-sm-6'). – makshh

<div class="container"> 
     <div class="col-sm-6 col-sm-offset-3 vertical-center"> 
      <div class="jumbotron login_main" > 
       <h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
       <h2 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</h2> 
       <form> 
        <p>hello</p> 
       </form> 
      </div> 
     </div> 
    </div>

Sie werden es wollen, wickeln alle in einem Element mit der Klasse „Container“. Das Bootstrap-Grid-System verwendet 12 Spalten. Wenn Sie also ein Element mit 6 Spalten Breite haben, müssen Sie es um 3 verschieben, um es zu zentrieren. Der Code hier sollte funktionieren.

Quelle

2016-05-26 20:26:33

Bootsrap ist nicht richtig anzeigen-Elemente wie Jumbotron scheint nicht zu funktionieren

Antwort

Verwandte Themen