Auf Thema antworten

Beitrag

[QUOTE="xorediv, post: 13708, member: 4693"]
Hey,

ich habe ein Problem mit meinem Kontaktformular.
Das Formular (Bootstrap) sieht gut aus. Nun wollte ich aber gerne eine Checkbox einbauen, die dann so schön wie die anderen Textboxen angeordnet ist.
Leider hat mich die Realität wieder eingeholt und es sieht schäbig aus:

[MEDIA=imgur]MFrw3Ti[/MEDIA]

[MEDIA=imgur]SvuPU6v[/MEDIA]

Ich habe schon einige Codes ausprobiert, aber leider wird mir die Checkbox nie korrekt angezeigt. Ziel ist es, dass die Checkbox mit der Textbox links abschließt und der Text dann in einer Zeile daneben ist.

Code:
[SPOILER="Kontaktformular"]
[CODE=html] <section class="section-main ptb-100">
      <div class="container">
        
        <div class="row justify-content-center">
          <div class="col-12  col-md-8 text-center">
            
            <div class="section-title mb-30">
              <h2>Schreiben Sie<span> mir gerne</span></h2>
              <p class="mb-15">Erzählen Sie mir gerne was über Ihr Vorhaben. Ich werde es mir anschauen und mich bei Ihnen melden!</p>
          
             <p class="mb-15"> Mit dem Absenden erklären Sie sich mit unseren <u><a href="datenschutz.html">Datenschutzbestimmungen</a></u> einverstanden.</p>
              <hr class="center no-margin">
            </div>
            
          </div>
        </div>
        
        
        <form method="post">
        <div class="row justify-content-between align-items-center">
          <div class="col-12 col-md-6">
            <div class="form-group">
              <input class="form-control form-control-lg" id="namef" name="namef" required type="text" placeholder="Name *">
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="form-group">
              <input class="form-control form-control-lg" id="telefonf" name="telefonf" type="text" placeholder="Telefon">
            </div>
          </div>
        </div>
        <div class="row justify-content-between align-items-center">
          <div class="col-12 col-md-6">
            <div class="form-group">
              <input class="form-control form-control-lg" id="emailf" name="emailf" required type="text" placeholder="E-mail *">
            </div>
          </div>
      
      
              <div class="col-12 col-md-6">
            <div class="form-group">
              <input class="form-control form-control-lg" id="websitef" name="websitef" type="text" placeholder="Test">
            </div>
          </div>
        </div>
    
    
 
        <div class="row justify-content-between align-items-center">
          <div class="col-12">
            <div class="form-group">
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" required id="messagef" name="messagef" placeholder="Beschreiben Sie mir Ihr Anliegen"></textarea>
            </div>
          </div>
        </div>
    
     <div class="row justify-content-between align-items-center">
          <div class="col-12">
           <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Ich habe die <a href="datenschutz.html">Datenschutzbestimmungen</a> gelesen und bin damit einverstanden</label>
  </div>
     </div>
        </div>
      
    
    
        <div class="row justify-content-between align-items-center">
          <div class="col-12">
            <div class="form-group text-center">
              
              <button type="submit" name="absenden" class="btn btn-medium btn-dark mb-resp-30">Anfrage abschicken</button>
              
            </div>
          </div>
        </div>
      </form>
  
      <p style="color:green"><? echo $Erfolgreich; ?></p>
        
      </div>
    </section>[/CODE]
[/SPOILER]

Was kann ich noch probieren? Das ist der CSS-Part:

[SPOILER="CSS"]
[CODE=css].form-check {
  position: relative;
  display: block;
  padding-left: $form-check-input-gutter;
}

.form-check-input {
  position: absolute;
  margin-top: $form-check-input-margin-y;
  margin-left: -$form-check-input-gutter;

&:disabled ~ .form-check-label {
    color: $text-muted;
  }
}

.form-check-label {
  margin-bottom: 0; // Override default `<label>` bottom margin
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0; // Override base .form-check
  margin-right: $form-check-inline-margin-x;

// Undo .form-check-input defaults and add some `margin-right`.
  .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: $form-check-inline-input-margin-x;
    margin-left: 0;
  }
}[/CODE]
[/SPOILER]

Bin am verzweifeln :D
Das komische ist, sobald ich den Inhalt des Labels auf ein Wort reduziere, sieht es korrekt aus:

[MEDIA=imgur]kePkhGb[/MEDIA]

Wenn ich dem form-check-label das Attribut "style="width:1000px;" zuweise, sieht es so aus:
[MEDIA=imgur]Kwql4T1[/MEDIA]

Danke sehr..
Liebe Grüße,
xorediv
[/QUOTE]

Authentifizierung