css - 移动 View 中的响应能力丧失

Question

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

                   140K  |   24k
                  Likes  |  Followers

在桌面 View 中，它在中心 bt 显示正常，在移动 View 中，它看起来像

              140k                                                       |

24k

我试过唱Text-Align

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>
    )
}

Answer 1

当你想在所有形式的设备中将一个屏幕分成两等份时，你可以简单地写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