Zum Inhalt springen

Bootstrap Displayauflösung falsch

murat1895
 Teilen

Empfohlene Beiträge

murat1895

murat1895

Geschrieben
Geschrieben

Hallo zusammen,

seit kurzem versuche ich mit Bootstrap zuarbeiten.

Die Webseite schaut lokal auch sehr hübsch aus und wird richtig dargestellt.
Über extern wird jedoch die Displayauflösung nicht erkannt oder falsch interpretiert.

Ich binde die beiden .js-Files im Header wie folgt ein: 

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

Wenn ich nun über extern auf den Webserver zugreife wird jedoch die Auflösung nicht erkannt, es wird also alles im Smartphone/Tablet-Format angezeigt. Jemand ne Ahnung wo ich mal schauen sollte?

sas86ks

sas86ks

Geschrieben
Geschrieben

Warum bindest du eigentlich eine alte jquery Version ein? (Wird nicht die Ursache sein, aber die Antwort interessiert mich ;)

Werden beide *.js Dateien gefunden und schmeißen kein 404 oder sonstiges?

Hast du an den Breakpoints für die media queries was geändert?

murat1895

murat1895

Geschrieben
  • Autor
Geschrieben

Das ganze basiert auf eine Vorlage, nun ist aber die aktuelle Version eingebunden. 

So sieht meine index.php nun aus: 

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">


<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<meta charset="UTF-8">

</head>
<body>
<?php
include 'navigation.php';
?>
</body>
</html>

Und die Navigation habe ich gerade von https://getbootstrap.com/components/#navbar ausprobiert. Allerdings bekomme ich die Sicht wie auf nem kleinen Gerät. 

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

 

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...