我无法使用ReactJS Bootstrap更改容器的宽度、高度、边框、输入字段和按钮。但颜色和字体改变了

Question

我喜欢使用reactjs 创建注册页面，并且我可以使用react-bootstrap 作为CSS。我可以添加元素的字体、样式和颜色。但我无法更改容器、按钮和输入字段的大小。改变尺寸后就不会反映了。

我尝试将容器、输入字段和按钮的大小调整为大尺寸。但它不会反映在输出中。我想调整它的大小并添加一些更改。

Answer 1

您应该提供用于增加容器大小和其他组件的代码。不过，我相信我有一个可以满足您要求的解决方案。

1. 将缩小后的 Bootstrap 导入到您的组件中（您也可以在 App.tsx/jsx 中全局执行此操作）。
2. 应用 Bootstrap 库中的类来更改组件的大小。

import 'bootstrap/dist/css/bootstrap.min.css';

  <Form className="w-100">
     
  </Form>

或

  <Form className="h-100">
     
  </Form>

确实，像 w-100 这样的类允许您根据百分比调整组件的宽度。例如：

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

您可以使用 h-100、h-50、h-75 和 h-25 等类别对高度进行类似的更改。

您还可以选择创建自定义类并将它们添加到您的组件中。选择使用百分比还是视口取决于您的设计要求以及您希望在 Web 应用程序中实现的响应能力。这种灵活性使 Bootstrap 成为构建响应灵敏且具有视觉吸引力的用户界面的强大工具。如果您有更具体的问题或需要有关 Web 开发的任何方面的帮助，请随时询问。 由于您使用的是 Bootstrap 组件，因此这些样式组件需要 Bootstrap 库。因此，更复杂的任务可以参考官方文档。

如果您有任何具体问题或需要进一步帮助，请随时询问。

了解更多信息：https://getbootstrap.com/docs/4.0/utilities/sizing/