在移动视图中失去响应性答案

【问题标题】：loss of Responsiveness in mobile view在移动视图中失去响应性
【发布时间】：2019-08-25 19:53:50
【问题描述】：

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

                   140K  |   24k
                  Likes  |  Followers

在桌面视图中，它在中心 bt 中显示良好，在移动视图中，它看起来像

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

【问题讨论】：

我猜你需要添加 position: 'absolute' 和 paddingLeft: '45%' 来跟随Style
嗨雪莉，阅读这个 - stackoverflow.com/help/someone-answers，并尝试关闭问题。

标签： css reactjs bootstrap-4

【解决方案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

【讨论】：