Bootstrap 4 Alpha 6. Suchbox überläuft Container auf Navbar Kollaps

Ich bin ziemlich neu Bootstrap 4, so dass es hier viele Fehler geben könnte.Bootstrap 4 Alpha 6. Suchbox überläuft Container auf Navbar Kollaps

Ich möchte eine reaktionsfähige Navigationsleiste erstellen, die meine 4 Menüschaltflächen minimiert, aber die Suchleiste immer noch rechts hält. Ich bin mir noch nicht sicher, wie ich mit der Anzeige der Schaltflächen nach dem Expandieren umgehen soll, aber mein Ziel ist es, den Suchbalken in der richtigen Breite nach rechts zu halten.

Wenn der Bildschirm "klein" wird, erscheint die Navigationsschaltfläche und die Menüschaltflächen werden minimiert. Das ist cool. Aber die Suchleiste wächst nur vom Container her in. Wie behalte ich es im Container?

schätze ich Anregungen und Verbesserungen :)

nav { 
 
    background: brown; 
 
} 
 

 
nav .container { 
 
    white-space: nowrap; 
 
}

<head> 
 
    <!-- Meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 

 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 

 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
    <title>My Site</title> 
 
</head> 
 

 
<body> 
 

 

 

 
    <nav class="navbar sticky-top navbar-inverse navbar-toggleable-sm"> 
 

 
    <div class="container" style="width:1400px"> 
 

 

 
     <div class="d-inline-block"> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar"> 
 
        <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
     </div> 
 

 

 
     <div class="collapse navbar-collapse" id="Navbar"> 
 
     <ul class="navbar-nav"> 
 
      <li class="nav-item active"> 
 
      <a class="nav-link" href="#"> 
 
       <span class="fa fa-home"> Home</span> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#"> 
 
       <span class="fa fa-music"> Music</span> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#"> 
 
       <span class="fa fa-info"> About</span> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#"> 
 
       <span class="fa fa-address-card"> Contact Us</span> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 

 
     <form class="d-inline-block w-100" role="search"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" placeholder="Search by artist or album name"> 
 
      <span class="input-group-btn"> 
 
         <button class="btn btn-secondary" type="submit"> 
 
          <i class="fa fa-search"></i> 
 
         </button> 
 
        </span> 
 
     </div> 
 
     </form> 
 

 

 

 
    </div> 
 
    </nav> 
 
    <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
</body>

EDIT: ich um ein wenig gezwickt und bekam folgendes Ergebnis ->https://jsfiddle.net/Taliesin84/qL35nejo/

Mein aktuelles Ziel ist zu verhindern, Wenn die Größe zu klein wird, ziehen Sie die Suchleiste aus der Liste unter die ausgeblendeten Schaltflächen. Ich muss auch die Suchleiste in größeren Bildschirmgrößen breiter machen, aber das ist jetzt zweitrangig. Irgendwelche neuen Ideen?

Quelle

2017-10-03 Eduardo Almeida

Von einem Beispiel in Bootstrap 4 der GitHub Repo enthalten:

<form class="form-inline my-2 my-lg-0"> 
    <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
</form>

Quelle

2017-10-03 18:01:14 imhotap

Leider, das nicht funktioniert. Sobald die Menüeinträge ausgeblendet sind, wird das Suchfeld in eine Zeile darunter eingepackt :( –

Bootstrap 4 Alpha 6. Suchbox überläuft Container auf Navbar Kollaps

Antwort

Verwandte Themen