Question

我试图在这两个按钮之间添加一个空格，所以我使用了bootstraps模态 - 页脚类，我相信按钮应该在两者之间有空间，但是没有间距。我的代码如下：

＆LT; div className =＆＃34; modal-footer＆＃34;＆gt;

        <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

将JSX编译为javascript后，不会保留JSX标记之间的空格。如果你想保留它们，你可以这样做：

<input type="text" class="form-control" [ngModel]="mailItem.referenceEdit">

Answer 2

将它们放在＆＃39; btn-toolbar＆＃39;中，而不是＆＃39;模态页脚＆＃39;。 .modal-footer类用于定义模态的页脚样式。对于.btn-toolbar类，请参阅Bootstrap documentation上的更多信息。

试试这段代码：

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

请注意：我使用过＆＃39;按钮＆＃39; html标签不＆＃39;按钮＆＃39;引导程序。这就是我将bsstyle更改为className的原因。您可以尝试自举设置。

还有其他css方法也可以使用，你可以在按钮之间提供空间，最容易分配＆＃39; margin-right＆＃39;按钮。

Answer 3

为了解决这个问题，我删除了＆＃34; pull-right＆＃34;并且间距是从自然状态＆＃34;模态 - 页脚＆＃34;类。

    <div className= "modal-footer">

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

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

    </div>

Bootstrap页脚模态间距在React.js中不起作用

3 个答案: