Question

我是Zurb Foundation的新手，并在我的React 16项目中使用它。而且无法在名为 CountdownForm.jsx 的组件中减少表单输入和按钮的宽度。这两个元素（表单输入和按钮）占据页面的整个宽度。我想让它们居中，宽度为30％。

非常感谢任何帮助。

我的 Main.jsx

中有以下代码

var Main = (props) => {
  return (
    <div>
      <Navigation/>
      <div className="row">
        <div className="column small-centered medium-6 large-4">
          {props.children}
        </div>
      </div>
    </div>
  );
};

module.exports = Main;

然后在我的名为 CountdownForm.jsx 的子组件中，我写了如下

  render: function () {
    return (
      <div>
        <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
          <input type="text" ref="seconds" placeholder="Enter time in seconds"/>
          <button className="button expanded">Start</button>
        </form>
      </div>
    );
  }
});

module.exports = CountdownForm;

我还有一个名为_countdownForm.scss的文件，用于样式化表单，我在下面的文件中包含了

.countdown-form {
  width: 30%;
  justify-content: center;
}

表单输入的宽度应该由我在Main.jsx（下面部分）中定义的基础网格系统设置

<div className="row">
        <div className="column small-centered medium-6 large-4">
          {props.children}
</div>

我正在使用＆＃34; foundation-sites＆＃34;：＆＃34; 6.4.4-rc1＆＃34;和＆＃34;反应＆＃34;：＆＃34; ^ 16.0.0＆＃34;。项目的github https://github.com/rohan-paul/ReactCountdownTimer

Answer 1

没关系..已经解决了..

我不得不调整Countdown.jsx组件来解决这个问题，而不是Main.jsx“（并且_countdownForm.scss中定义的.coutdownForm CSS类在应用程序的这一点上没有影响解决这个问题，作为居中表单输入的内容在组件Countdown.jsx的渲染部分中处理

所以，我刚刚更改了Countdown.jsx，如下所示：

这

else {
        return <CountdownForm onSetCountdown={this.handleSetCountdown}/>;
      }

要

else {        
        return (
          <div className="grid-container">
            <div className="cell small-centered medium-6 large-4">
              <CountdownForm onSetCountdown={this.handleSetCountdown} />
            </div>
          </div>
        );

https://github.com/rohan-paul/ReactCountdownTimer/blob/master/app/components/Countdown.jsx

不能减少zurb基础形式的输入宽度

1 个答案: