Bootstrap funktioniert nicht

Alles was ich versuche zu tun ist, um text zu beginnen, in der Mitte des Bildschirms.

Hier ist der code unten. Beachten Sie, dass ich die minified bootstrap css-und js-Dateien in mein Projekt-Verzeichnis zusammen mit meiner html-Datei ohne Unterverzeichnisse. Ich habe diese Dateien aus dem vorkompilierten Bootstrap 3.0.1 herunterladen. Ich habe auch versucht, über die links, um die CDN statt. Funktioniert immer noch nicht. Wenn ich öffnen Sie diesen code in Firefox sehe ich keine Positionierung aktiv alle. Andere Bootstrap-styles hat nicht funktioniert entweder, wie ich versuchte, zu tun <p class = "large"> blah </p> und es nicht geschafft, den text groß.

HINWEIS: machen es einfacher für Menschen, um die Seite zu testen, habe ich ersetzt, die links zu lokalen bootstrap-Dateien mit einem link, um die bootstrap-CDN-Datei. 

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">

    <!-- 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row">
      <div class="span3 offset9">
        <p class="large">This Text</p>
      </div>
    </div>

    <h1>Hello, world!</h1>
  </body>
</html>
  • Sind Sie sicher, dass der Pfad zur Bootstrap-CSS-Datei korrekt ist?
  • ist .großen eine bootstrap-Klasse überhaupt? Versuchen Sie es mit <p class="lead"> wie in der Dokumentation.
InformationsquelleAutor macsplean | 2013-11-06
  1. 2

    in deinem jsfiddle, das bootstrap-Zeug ist nicht richtig eingesetzt werden, braucht es

    <body>
    <div class="row">
    <div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>

    und einige externe Resourcen, http://jsfiddle.net/N5n4Z/1/, ist ein Bootstrap 2 Skelett, mit Ihrem Beispiel, und es funktioniert. Gut, es sei denn, das Vorschaufenster ist zu klein. Wenn das Fenster zu klein, bootstrap, aufgrund seiner media-querys, ordnen Sie automatisch alle Zeilen unterhalb, und ignorieren alle offset.

    On a side note, warum nicht mit dem neuen Bootstrap 3? http://getbootstrap.com/

    Update

    Da Sie die Verwendung von Bootstrap 3 nun müssen Sie ändern Sie die markup ein bisschen.

    <div class="row">
    <div class="col-md-6 col-md-offset-3">
    <p>test loc</p>
</div>

    fiddle

    bootstrap Doku

    • dies hat nicht funktioniert. überprüfen Sie die aktualisierte Frage
    • Das ist wirklich seltsam. Nun, wenn ich gehen, um die bootstrap-Seite, die docs sind unterschiedlich. Ich bin entweder stolpern oder etwas wunderlichen passiert ist und ich denke, es ist letzteres.
    InformationsquelleAutor ZimTis
  2. 0

    Haben Sie vergessen, importieren Sie den javascript-Teil von bootstrap.

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
    InformationsquelleAutor jack
Schreibe einen Kommentar