[Bootstrap] Formular vergrößert bestimmten Bereich

  • HTML

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von Alex-Digital.

    [Bootstrap] Formular vergrößert bestimmten Bereich

    Hallo,

    ich wollte mich an Bootstrap trauen und
    wollte eine Website mit dieser designen.

    Ich nutze als Vorlage das Fluid Layout.

    Das ist der Abschnitt, der das Problem ist.

    HTML-Quellcode

    1. <body>
    2. <div class="navbar navbar-inverse navbar-fixed-top">
    3. <div class="navbar-inner">
    4. <div class="container-fluid">
    5. <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    6. <span class="icon-bar"></span>
    7. <span class="icon-bar"></span>
    8. <span class="icon-bar"></span>
    9. </button>
    10. <a class="brand" href="#">*******</a>
    11. <div class="nav-collapse collapse">
    12. <p class="navbar-text pull-right">
    13. Logged in as <a href="#" class="navbar-link">Username</a>
    14. </p>
    15. <ul class="nav">
    16. <li class="active"><a href="#">Home</a></li>
    17. <li>
    18. <div class="input-append" style="padding-top:3px">
    19. <input class="span2" id="appendedInputButton" type="text" />
    20. <button class="btn" type="button">Suchen</button>
    21. </div>
    22. </li>
    23. </ul>


    Das soll eine Suchformular werden und habe mal das <form> weggelassen.

    So schaut es ohne das <form> aus:


    Aber wenn in der Div input-append dann das <form> einfüge,
    kommt dieser riesige Abstand.


    Wieso? Kann man das so machen, dass es ausschaut wie
    das ohne <form>?

    Oder wenn man es anders lösen kann, lasst es mich wissen.

    Freue mich auf Antworten.

    MFG

    Alex-Digital :D
    ~ Alex-Digital :D

    if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D

    Alex-Digital schrieb:

    <li>
    <div class="input-append" style="padding-top:3px">
    <input class="span2" id="appendedInputButton" type="text" />
    <button class="btn" type="button">Suchen</button>
    </div>
    </li>


    Tausch das mal hiermit aus:

    HTML-Quellcode

    1. <li>
    2. <form class="navbar-form pull-left input-append">
    3. <input type="text" class="span2">
    4. <button type="submit" class="btn" style="margin-top: 5px;">Suchen</button>
    5. </form>
    6. </li>



    Den Inline-Style im Button solltest du in die CSS-Datei packen.
    Mit freundlichen Grüßen,
    Jan