React 16中使用Zurb Foundation无法缩小表单输入框与按钮宽度求助

作为刚接触Zurb Foundation的新手，遇到表单元素占满页面宽度的问题太正常啦！Foundation的表单控件默认就是100%宽度的，我给你两个实用的方案，帮你把输入框和按钮调整到30%宽度并居中：

方案1：用Foundation自带的网格系统（推荐） #

Foundation的网格系统本来就是用来布局的，用它来限制宽度+居中超级方便。你只需要把表单包裹在一个带居中类的窄列里就行：

在你的CountdownForm.jsx里可以这么写：

import React from 'react';

const CountdownForm = () => {
  return (
    <div className="row">
      {/* small-4表示占12格中的4格（约33%），接近你要的30%，small-centered让列居中 */}
      <div className="small-4 small-centered columns">
        <form>
          {/* 如果要把输入框和按钮放一行，用input-group */}
          <div className="input-group">
            <input type="text" className="form-input" placeholder="请输入内容" />
            <button type="submit" className="button">确认</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CountdownForm;

要是你想要精确的30%宽度，可以给这个列加个自定义样式调整宽度，比如：

.small-4.small-centered.columns {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

方案2：直接自定义CSS样式 #

如果你不想依赖网格，也可以直接给表单容器加样式，让它限制内部元素的宽度：

先创建一个CountdownForm.css文件，写这些样式：

.form-wrapper {
  width: 30%;
  margin: 0 auto; /* 实现水平居中 */
}

.form-wrapper .form-input,
.form-wrapper .button {
  width: 100%; /* 让元素填满容器的30%宽度 */
  margin-bottom: 0.8rem;
}

/* 如果用input-group组合元素，记得给input-group也设置宽度 */
.form-wrapper .input-group {
  width: 100%;
}

然后在组件里引入并使用这个类：

import React from 'react';
import './CountdownForm.css';

const CountdownForm = () => {
  return (
    <div className="form-wrapper">
      <form>
        <input type="text" className="form-input" placeholder="请输入内容" />
        <button type="submit" className="button">确认</button>
      </form>
    </div>
  );
};

export default CountdownForm;

小提醒 #

• 记得确认你已经正确引入了Foundation的CSS和JS文件，不然网格和表单类可能不会生效哦。
• 如果还是有问题，可以用浏览器的开发者工具（F12）查看元素的样式，看看是不是有其他自定义CSS覆盖了Foundation的默认样式。

内容的提问来源于stack exchange，提问作者Rohan_Paul