Form wird nicht richtig dargestellt

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

Es gibt Neuigkeiten! Ab sofort könnt ihr dem Donators Club auf Lebenszeit beitreten.
Weitere Infos im Thema Donator's Club ab heute wieder verfügbar!

  • Form wird nicht richtig dargestellt

    Hallo, ich möchte vorab sagen, ich experimentiere des öfteren und aktuell kann ich ein wahrscheinlich sehr kleines Problem nicht beheben. Ich arbeite gerade an einer "Such-Form", welche aber nicht richtig dargestellt wird (sieht Bild). Sobald ich den Browser aber in der Breite verkleinere, ziehen sich die Eingabefelder so wie es soll, bis zum rechten Rand der Suchbox. Könnte mir da jemand helfen?

    Bild: Klick


    HTML-Quellcode: search

    1. <div class="row">
    2. <div class="col-lg-12">
    3. <div class="col-md-4">
    4. <div class="well">
    5. <form class="form-horizontal" method="POST">
    6. <fieldset>
    7. <legend>Suchen</legend>
    8. <div class="form-group">
    9. <div class="col-md-4">
    10. <div class="input-group"> <span class="input-group-addon">Wohnort</span>
    11. <input id="wohnort" name="wohnort" class="form-control" placeholder="Stadt eingeben" type="text">
    12. </div>
    13. </div>
    14. </div>
    15. <div class="form-group">
    16. <label class="col-md-4 control-label" for="beziehung">Beziehungs-Status</label>
    17. <div class="col-md-4">
    18. <select id="beziehung" name="beziehung" class="form-control">
    19. <!-- <option value="0">Egal</option> -->
    20. <option selected value="1">Single</option>
    21. <option value="2">Vergeben</option>
    22. <option value="3">Verheiratet</option>
    23. <option value="4">Getrennt</option>
    24. </select>
    25. </div>
    26. </div>
    27. <!-- Select Basic -->
    28. <div class="form-group">
    29. <label class="col-md-4 control-label" for="ausrichtung">Ausrichtung</label>
    30. <div class="col-md-4">
    31. <select id="ausrichtung" name="ausrichtung" class="form-control">
    32. <!-- <option value="0">Egal</option> -->
    33. <option selected value="1">Hetero</option>
    34. <option value="2">Gay</option>
    35. <option value="3">Bi</option>
    36. </select>
    37. </div>
    38. </div>
    39. <div class="form-group">
    40. <label class="col-md-4 control-label" for="ausrichtung">wohnt</label>
    41. <div class="col-md-4">
    42. <select id="wohnt" name="wohnt" class="form-control">
    43. <!-- <option value="0">Egal</option> -->
    44. <option selected value="1">Alleine</option>
    45. <option value="2">In Gemeinschaft</option>
    46. <option value="3">Bei den Eltern</option>
    47. </select>
    48. </div>
    49. </div>
    50. <!-- Prepended text-->
    51. <div class="form-group">
    52. <div class="col-md-4">
    53. <div class="input-group"> <span class="input-group-addon">Alter von</span>
    54. <input id="agefrom" name="agefrom" class="form-control" placeholder="mindestens 18" type="text">
    55. </div>
    56. </div>
    57. </div>
    58. <!-- Prepended text-->
    59. <div class="form-group">
    60. <div class="col-md-4">
    61. <div class="input-group"> <span class="input-group-addon">Alter bis</span>
    62. <input id="ageto" name="ageto" class="form-control" placeholder="maximales Alter" type="text">
    63. </div>
    64. </div>
    65. </div>
    66. <!-- Button -->
    67. <div class="form-group">
    68. <div class="col-md-4">
    69. <center>
    70. <form action="search.php" method="post">
    71. <button type="submit" class="btn btn-primary" name="search" id="search">Finden</button>
    72. </form>
    73. </center>
    74. </div>
    75. </div>
    76. </fieldset>
    77. </form>
    78. </div>
    79. </div>
    80. </div>
    81. </div>
    Alles anzeigen
    Danke und freundliche Grüße
    Crowley :)
  • Du arbeitest in deinem Formular, in jeder Form-Group zusätzlich noch mit Columns (durch das col-md-4).
    Das macht keinen Sinn, da das Grid System von Bootstrap grundsätzlich auf der Struktur Container > Row > Column aufbaut.

    Durch deinen col-md-4 Eintrag bewirkst du, dass ab einer Breite von 992px die Formulare auf eine Breite von 33% gekürzt werden.
    Da bei nicht angegebenen kleineren Displaygrößen (bei dir sm und xs) standardmäßig die maximale Größe (12 bzw. 100% ) verwendet werden, sieht das
    Endergebnis bei mit einem kleineren Display auch besser aus.
    Da durch die column Klassen mit min-width media-querys gearbeitet wird ändert sich bei größer werdenden Displays insofern nicht anders
    angegeben nichts.
    Nach betrachten deines Formulares würde ich dir stark empfehlen, dir nochmal die Grundstrukturen von Bootstrap anzuschauen und das Formular nach
    folgendem Beispiel aufzubauen: getbootstrap.com
    Mit freundlichen Grüßen

    Headscracher | Tobi :thumbsup: