Fügen Sie padding/space zu Bootstrap Form/Seite am Ende

Question

Ich arbeite an einem Bootstrap-Formular, das die Reset/Submit-Schaltflächen am unteren Rand des Formulars hat. Wenn Benutzer auf dem iPhone auf die Schaltfläche Senden klicken, wie es ganz unten auf dem Bildschirm angezeigt wird, erscheinen zuerst die Safari-Symbole und dann muss der Benutzer ein zweites Mal auf die Schaltfläche Senden klicken.

Hier ist der Code des Endes der Form:

<button type="reset" class="btn btn-default">Reset</button> 
 
<button type="submit" class="btn btn-default">Submit</button> 
 
</form> 
 
</div> 
 
<!-- /container --> 
 

 

 
<script src="assets/js/jquery.min.js"></script> 
 

 
</body> 
 

 
</html>

Hier ist ein Screenshot zeigt, wie es aussieht, bevor die Benutzer auf die Schaltfläche Senden klicken:

und hier sehen Sie, was Sie sehen, wenn Sie zum ersten Mal auf die Schaltfläche "Senden" klicken:

sie zu zwingen, die Taste zum 2. Mal Senden klicken. Suchen Sie nach Tipps, wie Sie nach dem Formular/den Schaltflächen am besten Platz/Abstand hinzufügen können, um mehr Platz zu schaffen. Wenn Sie also nach unten scrollen, müssen Sie nicht zweimal klicken.

Answer 1

Wenn Sie zusätzlichen Abstand wollen könnten Sie margin-bottom wie 50px für das Formular

.form{ 
 
    position: relative; 
 
    margin-bottom: 50px; 
 
}

OR

Dies wird allerdings nicht empfohlen geben. Sie könnten Bootstrap verwenden, um eine Zeile zu erstellen, die etwas Standardspeicherplatz einnehmen kann.

<div class="row"> 
 
    <div class="col-md-12"> 
 
    </div> 
 
</div>

Answer 2

Sie können die Taste nach dem ersten Klick auf den Absenden-Button deaktiviert machen. Der folgende Link hilft Ihnen, eine Idee zu bekommen.

http://getbootstrap.com/css/#buttons-disabled

Sie haben für das JavaScript zu verwenden. Wenn Sie das Formular absenden, löst das Ereignis onsubmit aus. Verwenden Sie dieses Ereignis also, um eine JavaScript-Funktion aufzurufen, die die CSS-Klasse Ihrer Übermittlungsschaltfläche wie im obigen Link in den deaktivierten Status ändert. Der folgende Link wird Ihnen dabei helfen.

Change an element's class with JavaScript