javascript - 仅使用 css 将按钮跨到对面

Question

我的模式上有这两个按钮，可让用户下一步或重新启动表单进度。

我想将这些按钮的跨度切换为模式的全宽，我尝试了以下代码:

<div className="form-button">
  <button className="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}><img alt="Revise recommendations" src="/img/icons/redo.svg" className="button-image"/>Restart</button>
  <button className="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i className="icon-right"></i></button>
</div>

和我的CSS:

.form-button {
  width: 500px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
}

.reset-button {
  float: left;
}

.next-button {
  float: right;
}

我的预期输出是:

|| <RestartButton>      --modal width--          <NextButton> ||

我该怎么做？

Answer 1

将 classNames 更改为 classes，它将起作用:https://jsfiddle.net/yak613/yndrnvvo/

<div class="form-button">
  <button class="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}>Restart</button>
  <button class="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i class="icon-right"></i></button>

</div>