如何在React-Bootstrap组件中将padding / margin作为props通过

问题描述 投票：6回答：6

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

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

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

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

reactjs twitter-bootstrap-3 bootstrap-4 react-bootstrap
6个回答
3
投票

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

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

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

从here引用

1
投票

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"
);

（基于useMedia中的useHooks/useMedia。

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

示例用法：

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

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

如果需要将各种媒体查询映射到具有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默认值的默认值，包括响应点断点，分隔符，列数以及许多其他内容。您感兴趣的是$spacer。只需将替代写入.scss文件并将其导入您的根组件中。 Example。

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

0
投票

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

0
投票

通常，通过将自定义样式添加到样式参数中，我可以将其添加到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。

0
投票

只需根据您的输入尝试一次，如果仍然遇到任何问题，您仍然可以伸出援手。在下面，我们使用。px-md-5增加了。col填充，然后进行了反击与父级。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;

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

首先在src/index.js或App.js中包含引导CSS

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.