css - 移动 View 中失去响应能力

我有一个小问题。我必须像这样对齐

                   140K  |   24k
                  Likes  |  Followers

在桌面视图中，它在移动视图中的中心bt中看起来很好，看起来像

              140k                                                       |

24k

我试过唱文本对齐

import React from 'react'

const likeStyle={
    color:'#696969',
    borderRight: '1px solid #696969',
    paddingLeft:'45%'

}
const followStyle={
    color:'#696969'
}
export default function like(){
    return (
        <div className='row'>
            <div className='col-md-6 col-xs-6' style={likeStyle}>
                <p style={{fontSize:'1.8em'}}>140k</p>
                <p style={{fontSize:'0.8em'}}>LIKES</p>
            </div>
            <div className='col-md-6 col-xs-6' style={followStyle}>
                <p style={{fontSize:'1.8em'}}>24k</p>
                <p style={{fontSize:'0.8em'}}>FOLLOWERS</p>
            </div>
        </div>
    )
}

最佳答案

如果要将屏幕划分为所有形式的设备中的两个相等部分，则只需编写col，了解更多信息here

<div className='row'>
    <div className='col' style={likeStyle}>
        <p style={{fontSize:'1.8em'}}>140k</p>
        <p style={{fontSize:'0.8em'}}>LIKES</p>
    </div>
    <div className='col' style={followStyle}>
        <p style={{fontSize:'1.8em'}}>24k</p>
        <p style={{fontSize:'0.8em'}}>FOLLOWERS</p>
    </div>
</div>

您不需要paddingLeft:'45%'，而是可以使用textAlign:right，

const likeStyle={
    color:'#696969',
    borderRight: '1px solid #696969',
    textAlign:'right'
}

Demo