navbar mit Bootstrap funktioniert nicht

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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 ">
                         <
    class="nav-link" href="?set_context=messages&context_type=module">Willkommen</a>
                     </
    li>
                      <
    li class="nav-item ">
                         <
    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.

  • #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>Helloworld!</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>
          <
    class="navbar-brand" href="#">Brand</a>
        </
    div>

        <!-- 
    Collect the nav linksforms, 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 firstthen Popper.jsthen 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 {
            
        floatleft;
            list-
        stylenone;
            
        cursorpointer;

        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

          Lädt...
          X