时间戳

首页 > 解决方案 > 屏幕宽度变化时内容对齐方式不同（React、Bootstrap）

reactjs - 屏幕宽度变化时内容对齐方式不同（React、Bootstrap）

问题描述

我正在使用引导程序来帮助调整我的内容并使其具有响应性。我已经想出了如何使它全部与中心对齐，但是当我将其调整为较小的宽度时，它开始向左对齐。即使屏幕宽度随引导程序发生变化，如何使其与中心对齐？我是使用 React 的 Bootstrap 新手，但我想用它来节省 CSS 样式的时间。

return (
    <Container>
      <Row className='justify-content-md-center'>
        <Col md='auto'>
          <img
            className='img'
            src='https://angel.co/images/recruit/Flashlight.png'
            alt='flashlight'
          />
        </Col>
      </Row>

      <Row className='justify-content-md-center'>
        <Col md='auto'>
          <p className='heading'>There are no jobs posted</p>
        </Col>
      </Row>

      <Row className='justify-content-md-center'>
        <Col md='auto'>
          <p className='paragraph'>
            Your next best candidate is waiting for you. We have thousands of
            applicants looking for a new journey. Post a job now to get access.
          </p>
        </Col>
      </Row>

      <Row className='justify-content-md-center'>
        <Col md='auto'>
          <a href='default.asp' target='_blank' onClick={form}>
            <p className='link'>Post a job</p>
          </a>
        </Col>
      </Row>
    </Container>
  )

笔记本电脑视图 响应式视图

标签： reactjsbootstrap-5

解决方案

移动设备在 Bootstrap 中具有最高优先级。当您设置时，它会为(xs --> sm --> md --> lg --> xl --> xxl)<Col md='auto'>之后的那些断点应用布局，因此尺寸不会得到样式。此外，您应该使用而不是集中所有屏幕尺寸的所有内容。mdxssmjustify-content-centerjustify-content-md-center

这是您的组件的正确实现：https ://codesandbox.io/s/react-bootstrap-demo-forked-2sdi2?file=/src/App.js

推荐阅读