Checkbox im Kontaktforumular wird falsch angezeigt

xorediv · 24.03.2023

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:

https://imgur.com/MFrw3Ti

https://imgur.com/SvuPU6v

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:

HTML:

 <section class="section-main ptb-100">
      <div class="container">
        <!-- start row -->
        <div class="row justify-content-center">
          <div class="col-12  col-md-8 text-center">
            <!-- section-title -->
            <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>
            <!-- end section-title -->
          </div>
        </div>
        <!-- end row -->
        <!-- start content  -->
        <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">
              <!-- start action-button-->
              <button type="submit" name="absenden" class="btn btn-medium btn-dark mb-resp-30">Anfrage abschicken</button>
              <!-- end action-button-->
            </div>
          </div>
        </div>
      </form>
  
      <p style="color:green"><? echo $Erfolgreich; ?></p>
        <!-- end content  -->
      </div>
    </section>

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

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;
  }
}

Bin am verzweifeln

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

https://imgur.com/kePkhGb

Wenn ich dem form-check-label das Attribut "style="width:1000px;" zuweise, sieht es so aus:

https://imgur.com/Kwql4T1

Danke sehr..
Liebe Grüße,
xorediv