Question

我尝试使用React-Bootstrap作为道具来应用边距和填充。

我通过了docs，但是还没有找到关于在其中添加填充或边距的任何提及，就像在官方引导文档（3th和4th）中一样。我知道它对Bootstrap 4的支持不佳，因此两者都尝试过。

我尝试将参数传递为p={1}，paddingxs={5}或mt='1'，但它无法识别任何参数。更多信息试图在React-Bootstrap文件夹中找到任何 Spacing 元素，但失败了。

填充和边距用作类名。但是我觉得没有Bootstrap类就一定有办法。必须有一种财产

Answer 1

首先在您的src/index.js或App.js中加入引导CSS

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

然后，您可以通过在React中将所需的引导CSS类名称作为className属性传递来设置组件样式，例如：

import React from "react"
import Container from "react-bootstrap/Container";

function MyComponent() {
  return (
    <Container fluid className="p-0">
      <SomeOtherComponent />
    </Container>
  );
}

export default MyComponent

以上代码会将p-0 CSS类添加到Container。

参考

React - How do I add CSS classes to components?

React-Bootstrap - Stylesheets

Answer 2

您可以使用默认的React样式添加边距和填充：

const divStyle = {
  marginLeft: '10px',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

引用自here

Answer 3

您需要将className =“ p-5”添加到元素。这没有在react-bootstrap中记录，但是在原始的Bootstrap 4文档中：https://getbootstrap.com/docs/4.4/utilities/spacing/#examples

Answer 4

通常，我可以通过将自定义样式添加到React Bootstrap组件中，只需将它们添加到样式参数中即可。我在下面整理了一个简短的示例，希望对您有所帮助。

import React from 'react';
import { Button } from 'react-bootstrap';

const styles = {
    myCoolButton: {
        paddingTop: "10vh",
        paddingBottom: "10vh",
        paddingRight: "10vw",
        paddingLeft: "10vw"
    }
}

const ReactButton = (props) => {
    return (
        <Button style={styles.myCoolButton} onClick={()=> {
            console.log("Do something here!")
        }}>Click Me!</Button>
    );
}

export default ReactButton

如果您喜欢这样做，还可以传递自定义组件（包括来自react-bootstrap的组件）into the styled-components constructor。

Answer 5

Bootstrap的所有无jQuery的实现（React Bootstrap，BootstrapVue或ngBootstrap）都没有实现用于间隔（margin / padding的实用程序指令，这仅仅是因为Bootstrap使得在不必要的范围内不必要在大多数情况下，只需提供一组非常直观的Spacing utility classes。

您需要做的就是应用所需的类。

要根据响应间隔（媒体查询）有选择地应用实用程序类，可以使用useMedia钩子as demoed here。
简而言之：

const interval = useMedia([
    "(min-width: 1200px)",
    "(min-width: 992px)",
    "(min-width: 768px)",
    "(min-width: 576px)"
  ],
  ["xl", "lg", "md", "sm"],
  "xs"
);

（基于useHooks/useMedia中的useMedia）。

您现在可以在整个应用程序中重复使用此挂钩，以添加基于媒体间隔的逻辑。

示例用法：

// interval === 'sm' ? a : b
// ['xs', 'sm'].includes(interval) ? a : b
// negations of the above, etc...

重要提示：：此特定实现返回列表中第一匹配的媒体查询。

如果需要将各种媒体查询映射到具有true/false值的对象/映射，则需要修改getValue fn以返回整个列表，如下所示：

const getValue = () => {
  const matches =  mediaQueryLists.map(mql => mql.matches);
  return values.reduce((o, k, i) => ({...o, [k]: matches[i]}), {})
};

工作示例here。
显然，您可以对其进行扩展并添加/删除查询。但是，请注意，每个查询都会添加一个单独的侦听器，这样可能会影响性能。

在大多数情况下，只需返回第一个匹配查询（第一个示例）即可。

注意：如果上述useMedia钩子不足以满足您的用例，则enquire.js是针对JS中的媒体查询侦听器的更强大且经过严格测试的解决方案。它易于使用，轻巧且经过全面测试的跨浏览器/跨设备。我与它没有任何关系，但是十多年来，我在各种项目中都使用了它。简而言之，我不能推荐它。

回到Bootstrap 4：为了自定义$ spacer大小，请遵循Bootstrap theming下提供的指南，因为它实际上比我们通常所说的主题化（更改颜色）要多，它覆盖了默认值。 Bootstrap的SASS默认值，包括respondends断点，间隔符，列数以及许多其他内容。您感兴趣的人是$spacer。
只需将覆盖写入.scss文件并将其导入您的根组件中。 Example。

注意：一个（更简单，更直观的）自定义Bootstrap的选项是使用bootstrap.build进行可视化操作，但通常会落后一些次要版本（即，Bootstrap现在位于{ {1}}，构建工具位于v4.4.1）。
构建定制器提供直观的控件和实时可视化。
它允许导出为v4.3.0或.css。

Answer 6

只需根据您的输入尝试一次，如果仍然遇到任何问题，您仍然可以伸出援手。在下面，我们使用 .px-md-5 <增加了 .col 填充/ em>，然后在父 .row 上用 .mx-md-n5 进行计数。

JSX ：

import React from 'react' import { MDBContainer, MDBRow, MDBCol } from 'mdbreact'; const SpacingPage = () => { return ( <MDBContainer> <MDBRow className="mx-md-n5"> <MDBCol size="6" className="py-3 px-md-5">Custom column padding</MDBCol> <MDBCol size="6" className="py-3 px-md-5">Custom column padding</MDBCol> </MDBRow> </MDBContainer> ) } export default SpacingPage;

如果您对此仍有疑问，请随时提出。

Answer 7

答案是：React Bootstrap 没有使用边距/填充的道具。

你可以为 col 类使用 props，但不能为 margins 使用。

示例：

<Col className="col-6 col-md-3 mb-3 pt-2">
// there you have a Col component from React-Bootstrap 4
// it has some grid system classes, that you can use as props like this:

https://react-bootstrap.github.io/layout/grid/

<Col xs={6} md={3} className="mb-3 pt-2">
// but as you can see, the native classes of Bootstrap 4 like
// mt, mb, pt, pb etc, they have not a props use with
// React-Bootstrap, you have to use them like regular classes
// inside "className"

如何在React-Bootstrap中添加填充/边距

7 个答案: