Question

：）

我想将一些内容放入矩形CellWrapper（蓝色矩形）组件中，以便将其分布在其中的左侧（图像）和右侧（文本）中。但是由于某种原因，拒绝的内容分为两列，而是分成不同的行，甚至“破坏” UI，如下所示：

CellWrapper看起来像这样：

const CellWrapper = styled.div`
  width: 400px;
  height: 200px;
  background-color: rgb(68,115,159);
  margin: 5px 5px;
  border-radius: 6px;
  display:inline-block;
  /*@media only screen and (max-width: 500px) {
        display:block;
        width:100%;
    };*/
`;

我一直在尝试将Bootstrap提供的简单网格系统添加到我的简单React组件中。

这是我使用Bootstrap的组件的版本：

function DataCell(props) {
return (
    <CellWrapper>
        <div className="container-fluid">
            <div className="row">
                <div className="col-lg-5">
                    <ImageWrapper>
                        <Img src={props.imageLink} alt="image placeholder"/>
                    </ImageWrapper>
                </div>
                <div className="col-lg-7">
                <h1>{props.title}</h1>
                    <p>{props.description}</p>
                </div>
            </div>
        </div>
    </CellWrapper>
);
}
export default DataCell;

...但是因为这一步似乎没有让步，所以我也尝试使用React-Bootstrap达到相同的结果：

function DataCell(props) {
return (
    <CellWrapper>
        <Grid fluid={true}>
            <Row>
                <Col lg={5}>
                    <ImageWrapper>
                        <Img src={props.imageLink} alt="image placeholder"/>
                    </ImageWrapper>
                </Col>
                <Col lg={7}>
                    <h1>{props.title}</h1>
                    <p>{props.description}</p>
                </Col>
            </Row>
        </Grid>
    </CellWrapper>
);
}
export default DataCell;

我尝试使用纱线

yarn add bootstrap
yarn add react-bootstrap

当我尝试导入“常规”引导程序时，我尝试了以下操作：

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

和

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

我很小心也使用“ className = {}”而不是“ class =”（因为React ofc）。但是由于那似乎对我的组件没有任何影响，因为内容不想放入两列中，所以我决定也尝试使用React-Bootstrap。在这里，我使用以下命令导入了必要的内容：

import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

，我使用this one和this one之类的示例尝试了几种组合，但它似乎还是没有用。还有其他方法/我是否会误以为会导致组件中的元素最终出现在2个单独的列中而不是仅仅包含在单独的行中的东西？

预先感谢您的帮助！：）

Bootstrap和React-Bootstrap似乎不响应调用

0 个答案: