Bootstrap Footer Modal Spacing funktioniert nicht in React.js

Question

Ich versuche, ein Leerzeichen zwischen diesen beiden Tasten hinzuzufügen, also habe ich Bootstraps Modal-Footer-Klasse verwendet und ich glaube, die Tasten sollten Platz dazwischen haben, aber es gibt keine Abstand. Mein Code ist unten:

< div classname = "modal-footer">

 <Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button> 

     <Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button> 

     </div> 

Answer 1

Die weißen Räume zwischen JSX-Tags werden nicht eingehalten, wenn die JSX Javascript kompiliert wird. Wenn Sie wollen, ohnehin zu halten, können Sie dies tun:

<Button bsStyle = "primary pull-right" formNoValidate={true} type="submit">Submit</Button> 
{' '} 
<Button bsStyle = "default pull-right" onClick={this.resetForm} type="reset">Reset</Button> 

Answer 2

Setzen Sie sie innen ‚btn-Symbolleiste‘, nicht ‚modal-footer‘. Mit der Klasse .modal-footer wird der Stil für die Fußzeile des Modals definiert. Für .btn-toolbar-Klasse finden Sie weitere Informationen auf Bootstrap documentation.

diesen Code Versuchen:

 <div className="btn-toolbar"> 

      <button className="btn btn-primary pull-right" formNoValidate={true} type="submit">Submit</button> 

      <button className ="btn btn-primary pull-right" onClick={this.resetForm} type="reset">Reset</button> 

     </div> 

Bitte beachten Sie: Ich habe 'Button' HTML-Tag NICHT 'Button' von Bootstrap verwendet. Deshalb habe ich den bsstyle in className geändert. Sie können das Bootstrap-Setup ausprobieren.

Es gibt auch andere CSS-Methoden, mit denen Sie zwischen den Schaltflächen Platz bieten können. Am einfachsten ist es, die Schaltfläche "Rand rechts" der Schaltfläche zuzuweisen.

Answer 3

Um dies zu beheben, habe ich die "Pull-rechts" entfernt und der Abstand von bootstraps "modal-footer" -Klasse gearbeitet.

<div className= "modal-footer"> 

    <Button bsStyle = "primary" formNoValidate={true} type="submit">Submit</Button> 

    <Button bsStyle = "default" onClick={this.resetForm} type="reset">Reset</Button> 

    </div>