navbar mit Bootstrap funktioniert nicht

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    navbar mit Bootstrap funktioniert nicht

    Es werden die <li> tags immer auf 100% untereinander angezeigt. Kann mir jemand helfen, den Fehler zu finden? Hier der Html Code:

    PHP-Code:
    <!DOCTYPE HTML>
    <    html>
      <    head>
      <    meta charset="utf-8">
       <    meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--     Bootstrap CSS -->
        <    link rel="stylesheet" href="./appearence/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      
      
      <    title>Bootstrap</title>
      
      
     
       <!--     Optional JavaScript -->
     <!--     jQuery first,https://code.jquery.com/ then Popper.js, then Bootstrap JS -->
         <script src="./lib/jquery-3.3.1.min.js" type="text/javascript"></script>
    </    head>
    <    body>

        <    div class="container-fluid bg-secondary border-top-w">
                   
         
               <    nav class="navbar navbar-toggleable-md navbar-dark  bg-faded">
            
                  <    button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <    span class="navbar-toggler-icon"></span>
                  </    button>
                  
                  <    div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <    ul id="mainNavig" class="navbar-nav mr-auto">
                      <    li class="nav-item ">
                         <    a class="nav-link" href="?set_context=messages&context_type=module">Willkommen</a>
                     </    li>
                      <    li class="nav-item ">
                         <    a class="nav-link" href="?set_context=reports&context_type=module">einen Bericht senden</a>
                     </    li></ul>              

                   </    div>
               </    nav>                                                                                                                              
           
        </    div>
            
        
         
         
         <    script src="./appearence/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      
         
         
    </    body>
    </    html> 
    Zuletzt geändert von sanktusm; 17.03.2018, 19:52.
    Stichworte: -
  • #2
    das hier ist einfach von bootstrap kopiert und funktioniert auch nicht!!!

    PHP-Code:

    <!doctype html>
    <    html lang="en">
      <    head>
        <!--     Required meta tags -->
        <    meta charset="utf-8">
        <    meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--     Bootstrap CSS -->
        <    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <    title>Hello, world!</title>
      </    head>
      <    body>
       
       <    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">
            <    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>
       
         
        <!--     Optional JavaScript -->
        <!--     jQuery first, then Popper.js, then Bootstrap JS -->
        <    script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <    script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <    script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      </    body>
    </    html> 

    Kommentar

    • #3
      1. Was ist der Fehler?
      2. Wenn du <li>-Elemente nebeneinander haben möchtest, musst du mit float arbeiten

      Gruß
      Peter
      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
      Meine Seite

      Kommentar

      • #4
        Ich habe folgendes Stylesheet eingerichten...

        es funktioniert dennoch nicht. Außerdem funktioniert ja der Beispielcode nicht! Warum?

        PHP-Code:
        #mainNavig li {
                    float: left;
            list-        style: none;
                    cursor: pointer;
        } 

        Kommentar

        • #5
          Hast du mal die Developer-Tools von Firefox bemüht? Bei mir werden SCSS-Dateien (!) eingebunden. Und die kann ein Browser nicht interpretieren.



          Gruß
          Peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar

          Vorherige template Weiter
          Lädt...
          X