Bootstrap 文本根据断点对齐

Question

考虑代码：

import React from 'react'
import DarkPattern from '../Assets/dark-pattern.jpg'

const Profile = () => {
    return (
        <div>
            <section className="bg-dark text-light  text-center ">
            <img src='https://i.pinimg.com/originals/ba/c1/37/bac13770cdea801e72852d8dc7160295.png' className='profile-img' alt='profile-img' />
           
                <div className="row px-5 w-75 mx-auto" >
                <div className="text-start col-md-6 col-md-4">
                    <h1>Name</h1>
                    <p>Tag</p>
                </div>
                <div className="text-end col-md-6 col-md-4 ">
                    <h1>Level</h1>
                    <p>Score</p>
                </div>
                </div>
            </section>
        </div>
    )
}

export default Profile

输出：

并且在移动模式下：

我想在移动模式下做的是仅在移动模式下使文本居中对齐。我想左列到文本对齐开始，右列到文本对齐结束。有什么想法吗？？

P.S。只有 bootstrap，不想使用 CSS 媒体查询。

Answer 1

查看有关文本 class 的文档：

https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment

您可以将默认设置设置为居中，并在中上添加一个 text-md-left class。

一如既往，手机应该是您的默认样式，然后随着尺寸的增加而改变。

Bootstrap 文本根据断点对齐

Bootstrap Text Align on the basis of breakpoints

css

web

reactjs

react-bootstrap

bootstrap-4