Bootstrap - Dropdown in UL versetzt nach oben ggü. Buttons

[Timo1980]

Hallo zusammen,

ich habe in einer UL drei Buttons als ListenItems, welche sich alle auf der selben Position befinden. Zusätzlich ist mittendrin ein Dropdownfeld enthalten. Das Dropdownfeld wird auf der Seite etwas versetzt nach oben angezeigt.

Kann mir jemand sagen, woran das liegt?

        <div class="collapse navbar-collapse div-inline" id="myNavbar">
                <ul class="nav navbar-nav navbar-right div-inline">
                    <li><a href="#"><button type="button" class="btn btn-default">Test</button></a></li>
                    <li>
                        <div class="dropdown div-inline">
                        <button class="btn btn-default dropdown-toggle dropdown-menu-center text-center" 			type="button" id="menu1" data-toggle="dropdown">Tutorials
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                            <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
                            <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
                            <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
                        </ul>
                        </div>                                                
                    </li>                    
                    <li><a href="#"><button type="button" class="btn btn-success">Einloggen</button></a></li>
                    <li><a href="#"><button type="button" class="btn btn">Registrieren</button></a></li>

Vielen Dank im Voraus.

Gruß Timo

[dedlfix]

Tach!

Kann mir jemand sagen, woran das liegt?

Am CSS. Wenn ich raten soll - mehr kann ich ohne Online-Beispiel oder Code nicht tun -, ist es im div-inline.

Und schau mal, ob du statt der nichtssagenden div-Elemente speziellere nehmen kannst, beispielsweise nav.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Und schau mal, ob du statt der nichtssagenden div-Elemente speziellere nehmen kannst, beispielsweise nav.

Nein, nicht nav, wenn keine Navigation drin ist.

(Ich weiß jetzt aber auch ohne weiteres nicht, ob "menu"/"menuitem" hier angebracht ist.

LLAP 🖖

[Timo1980]

Vielen Dank für deine Antwort.

Hier der dazugehörige CSS Code

Ich bin relativ neu was Bootstrap angeht und habe den Code zum Teil selber geschrieben und zum Teil abgelesen.

.container-fluid
{
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.img-responsive
{
    display: inline;

}
.myimg
{
    width: 100%;
}

.navbar
{
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size:12px;
    letter-spacing: 5px;
}

.navbar-nav li a:hover
{
    color: #1abc9c !important;
}

.div-inline
{
    display: inline;
}

[Timo1980]

Hier noch mal der gesamte Code für die Navbar:

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapes" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>                    
                <a class="navbar-brand" href="#">Testseite</a>
            </div>

            <div class="collapse navbar-collapse div-inline" id="myNavbar">
                <ul class="nav navbar-nav navbar-right div-inline">
                    <li><a href="#"><button type="button" class="btn btn-default">Test</button></a></li>
                    <li>
                        <div class="dropdown div-inline">
                        <button class="btn btn-default dropdown-toggle dropdown-menu-center text-center" type="button" id="menu1" data-toggle="dropdown">Tutorials
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                            <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
                            <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
                            <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
                        </ul>
                        </div>                                                
                    </li>                    
                    <li><a href="#"><button type="button" class="btn btn-success">Einloggen</button></a></li>
                    <li><a href="#"><button type="button" class="btn btn">Registrieren</button></a></li>
                    <!--<li><a href="#">WHAT</a></li> !-->
                </ul>
            </div>
        </div>
    </nav>

[Gunnar Bittersmann]

@@Timo1980

<li><a href="#"><button type="button" class="btn btn-success">Einloggen</button></a></li>
<li><a href="#"><button type="button" class="btn btn">Registrieren</button></a></li>

Das ist falsches HTML. Interaktive Elemente (a, button, …) dürfen keine anderen interaktiven Elemente (a, button, …) beïnhalten.

Im Übrigen ist <a href="#"> immer falsch, wenn damit kein Sprung zum Seitenanfang gemeint ist. Also immer™.

LLAP 🖖

[dedlfix]

Tach!

<li><a href="#"><button type="button" class="btn btn-success">Einloggen</button></a></li>
<li><a href="#"><button type="button" class="btn btn">Registrieren</button></a></li>

Das ist falsches HTML. Interaktive Elemente (a, button, …) dürfen keine anderen interaktiven Elemente (a, button, …) beïnhalten.

Ja, das a-Element kann ersatzlos entfallen. Oder der Button, wenn das Login auf einer anderen Seite stattfinden soll. Man kann dann dem a auch die btn-Klassen zuweisen, damit das Bootstrap sie wie ein Button aussehen lässt.

Im Übrigen ist <a href="#"> immer falsch, wenn damit kein Sprung zum Seitenanfang gemeint ist. Also immer™.

Das wird wohl erstmal nur zum Test als Platzhalter für die spätere URL drin sein.

dedlfix.

[Timo1980]

Daran lag es… Nun sind alle Buttons und das Dropdownfeld auf einer Höhe.

Allerdings liegen jetzt direkt nebeneinander. Wie kann ich zwischen den Buttons einen Abstand einbauen?

[dedlfix]

Tach!

Wie kann ich zwischen den Buttons einen Abstand einbauen?

Mit margin (margin-right/margin-left).

dedlfix.

[Timo1980]

Klasse, vielen Dank… Jetzt hat alles geklappt.

[dedlfix]

Tach!

Ich bin relativ neu was Bootstrap angeht und habe den Code zum Teil selber geschrieben und zum Teil abgelesen.

Du könntest dir die Entwicklertools im Browser schnappen (F12, oder Rechtsklick auf ein Element und Inspect oder ähnliches wählen), und damit die Ursache zu ermitteln versuchen.

Oder du probierst das nochmal ohne eigenen CSS-Code. Und den dann schrittweise hinzufügen, bis das Problem auftaucht.

Ich vermute das display:inline macht da was kaputt.

dedlfix.