[ERLEDIGT] BOOTSTRAP Lücke

[dennis5713]

Guten Tag liebe Community,
das hier ist mein erster Eintrag, sollte ich im Bereich falsch liegen, so verschiebt bitte meinen Eintrag. ich habe folgendes Problem, ich habe eine Seite mit Bootstrap erstellt und bisschen rumgespielt. Habe nun eine Lücke zwischen meiner Navigationsleiste und einer Meldung, welche ausgegeben wird. Wie kann ich diese Lücke schließen bzw. wie würde ich, sofern es notwendig ist eine .css erstellen, welche die bootstrap css an den stellen, wo ich es angebe sogesehen überschreibt.

Lücke ist hier im Bild zu sehen. Zusätzlich hier mein Code:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <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="index.php"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span>  PHP-Testseite</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"> <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>  Index.PHP <span class="sr-only">(current)</span></a></li>
        <li><a href="#"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> PHP-Scripts</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-level-up" aria-hidden="true"></span> Men&uuml;<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Flash</a></li>
            <li><a href="#"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> MySql</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#"> <span class="glyphicon glyphicon-indent-left" aria-hidden="true"></span> Java-Anwendungen</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-primary">Suchen <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"> <span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span> Dennis und Phil, BGy 14/2 <span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Bereich  <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"> <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Login</a></li>
            <li><a href="#"> <span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span> Clear all Tables</a></li>
            <li><a href="#"> <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Update</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Eingangstext &auml;ndern</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

und hier die stelle, an der diese Meldung kommt:

 <div class="alert alert-info" role="alert"><center>Loggen sie sich ein oder registrieren sie sich!</center></div>

Danke schonmal :)
liebe Grüße,
Dennis5713

 

[Tronjer]

<center> ist falsch.

 

[dennis5713]

Wenn ich Center entferne ist der Abstand zwischen Navbar und der Meldung genauso vorhanden

 

[Tronjer]

Stelle die Seite mal online und poste den Link dazu.

 

[SpiceLab]

Die Klasse .navbar bringt von Hause aus margin-bottom:20px mit.

Lösung, um die Voreinstellung zu überschreiben:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<style>.navbar {margin-bottom:0}</style>

bzw. in einer globalen CSS-Datei:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="pfad/zu/style.css" />

/* style.css */
.navbar {margin-bottom:0}

Moderation: Von HTML nach CSS verschoben.

 

[dennis5713]

Ja wunderbar, funktioniert so, dankeschön und schönen abend :)