Question

如何在响应中对齐按钮，文本框和文本居中？

    <div className="row text-center">
      <div className="text-center col-12">
        <div className="form-group text-center col-4">
          <div style={{ fontSize: "18px" }} className="field-label mb-2">
            Apply Now
          </div>
          <input
            style={{ height: "38px" }}
            className="col-12 mb-2"
            type="email"
            name="email"
            placeholder="email"
            value={email}
            onChange={e => onEmailChange(e)}
          />
          {validator.message("email", email, "required|alpha")}
          <button
            className="btn-solid btn col-12"
            style={{ height: "45px" }}
            type="button"
            disabled={isEmailLoading}
            onClick={e => onClickApply(e)}>
            {isEmailLoading ? (
              <CircularProgress color="inherit" size={20} className="" />
            ) : (
              "Apply"
            )}
          </button>
        </div>
      </div>
    </div>

Answer 1

如我所见，您正在为整个表单使用类col-4。如果您的网格系统是12-cols（我想是！），则您的列将从左开始放置！除非您为它们分配偏移量（忽略某些列）。如果您想将col放在中间，则必须使用offset！在这种情况下，您需要传递4个cols来使您的商品居中！如果您使用的是引导程序，则可以轻松使用offset-4！

有关网格系统（如引导程序：Offset Classes in Bootstrap

）中偏移的更多详细信息

您的div类示例：

className="form-group text-center col-4 offset-4"

如何在响应中将按钮，文本框和文本居中对齐？

1 个答案: