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

【问题标题】：Content aligning differently when screen width changes ( React, Bootstrap )屏幕宽度变化时内容对齐方式不同（React、Bootstrap）
【发布时间】：2021-10-16 12:39:51
【问题描述】：

我正在使用引导程序来帮助调整我的内容并使其具有响应性。我已经想出了如何使它全部与中心对齐，但是当我将其调整为较小的宽度时，它开始向左对齐。即使屏幕宽度随引导程序发生变化，如何使其与中心对齐？我是使用 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>
  )

Laptop View Responsive View

【问题讨论】：

标签： reactjs bootstrap-5

【解决方案1】：

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

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

【讨论】：

非常感谢，非常感谢