Bootstrap Navigation Brand, Suche, Login

11/27/2017 11:38 Masterkroko1#1

Hallo,

ich bin derzeit recht neu in der Bootstrap Welt und wollte mit 4.x starten.

Leider sto�e ich gleich am Anfang auf ein Problem...
Es geht mir hierbei um die Navigation, welche sich �ber die gesamte Browserbreite erstreckt.

Der Aufbau orientiert sich an YouTube.

Als erstes Element kommt ein Logo gefolgt von einer Suche. Und hier ist auch schon mein Problem ich schaff es nicht die Suche breiter zu ziehen. Die steht fest bei gesch�tzten 250px. Alle Versuche die Suche um ein doppeltes zu verl�ngern schlug fehl. :rtfm:

Auf der Rechten Seite der Navigation taucht dann der Login auf. Dies bekomme ich jedoch auch noch hin.

Anbei die HTML-Struktur, die bis jetzt am besten passte...

HTML Code:

        <nav class="fixed-top bg-dark d-flex justify-content-star">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>

Danke f�r jeden Tipp!

Mit freundlichen Gr��en
Kroko

11/27/2017 22:01 LenoxArt's#2

<div class="container-fluid"> dann sollte sich der container �ber die gesamte breite strecken.

glaube dazu musstest du aber noch jquery mobile einbinden.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

11/28/2017 00:28 False#3

Quote:

Originally Posted by Masterkroko1

HTML Code:

        <nav class="fixed-top bg-dark d-flex justify-content-star">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>

Danke f�r jeden Tipp!

Mit freundlichen Gr��en
Kroko

Quote:

Originally Posted by LenoxArt's

<div class="container-fluid"> dann sollte sich der container �ber die gesamte breite strecken.

glaube dazu musstest du aber noch jquery mobile einbinden.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Nein, erstens hat Jquery mobile nichts mit bootstrap zu tun zudem hat er eine ganz andere Frage gehabt.

@TE
Was hast du den alles schon versucht ?
Evtl. hilft dir dies weiter
[Only registered and activated users can see links. Click Here To Register...]

11/28/2017 00:37 Masterkroko1#4

Einiges, keine Ahnung das mache ich immer kruz nebenbei wenn ich ne Ablenkung brauch

HTML Code:

       <nav class="fixed-top bg-dark d-flex justify-content-star">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2 col-lg-6">
                <form class="form-inline">
                    <div class="input-group  col-lg-6">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>

Eine M�glichkeit w�re an den 2 divs die um die Suche sind col-lg-6 dranzuhauen. Nur kommt mir das nicht ganz richtig vor ... Auch funktionieren aus irgendein Grund nur Grade Zahlen wenn ich es mit col-lg-5 teste bekomme ich die alte gr��e

11/28/2017 11:44 xShizoidx#5

Habe mich noch nicht mit Bootstrap 4 besch�ftigt, aber hier mal meine L�sung. Gibt vielleicht bessere L�sungen, aber die funktioniert auf jeden Fall und ist reponsive f�r alle Ger�te.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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">

    <style>
        a.navbar-brand {
            margin-right: 0;
            margin-left: 1em;
        }
        
        nav .row div:nth-of-type(2) form {
            width: 100%;
        }
        
        nav .row div:nth-of-type(2) form .input-group {
            width: 100%;
        }
        
        body > nav > div > div:last-child {
            margin-left: auto;
        }
        
        @media (max-width:991px) {
            body nav .row div:nth-of-type(1) {
                order: 1;
            }
            body nav .row div:nth-of-type(2) {
                order: 3;
            }
            body nav .row div:nth-of-type(2) form {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            body nav .row div:nth-of-type(3) {
                order: 2;
            }
        }
    </style>
</head>

<body>
    <nav class="fixed-top bg-dark">
        <div class="row">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2 col-lg-4 col-sm-12">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

11/28/2017 13:17 Masterkroko1#6

Ich hab dein Vorschlag genommen und noch etwas angepasst.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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">

    <style>
        a.navbar-brand {
            margin-right: 0;
            margin-left: 1em;
        }
        
        nav .row div:nth-of-type(2) form {
            width: 100%;
        }
        
        nav .row div:nth-of-type(2) form .input-group {
            width: 100%;
        }
        
        @media (max-width:767px) {
            body nav .row div:nth-of-type(1) {
                order: 1;
            }
            body nav .row div:nth-of-type(2) {
                order: 3;
            }
            body nav .row div:nth-of-type(2) form {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            body nav .row div:nth-of-type(3) {
                order: 2;
            }
        }
    </style>
</head>

<body>
    <nav class="fixed-top bg-dark">
        <div class="row">
            <div class="p-2">
                <a class="navbar-brand" href="#">PlayGround</a>
            </div>

            <div class="p-2 col-lg-4 col-md-4 col-12">
                <form class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="p-2 ml-auto">
                <ul class="nav navbar-pills navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

So Funktioniert es und sieht auch ganz akzeptabel aus. Vielen Dank.
Nun muss ich mir mal �berlegen wo die eig. Navigation (Men�punkte) hin
kommt.