Bootstrap Text Align 基于断点答案

【问题标题】：Bootstrap Text Align on the basis of breakpointsBootstrap Text Align 基于断点
【发布时间】：2021-09-10 21:51:37
【问题描述】：

考虑代码：

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

输出：

在移动模式下：

我想在移动模式下做的是仅在移动模式下使文本对齐居中。我想左列到 text-align-start，右列到 text-align-end。有什么想法吗？？

附：仅引导，不想使用 CSS 媒体查询。

【问题讨论】：

标签： css reactjs web bootstrap-4 react-bootstrap

【解决方案1】：

查看有关文本类的文档：

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

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

与往常一样，移动设备应该是您的默认样式，然后随着尺寸的增加而改变。

【讨论】：