如何在 MD 及以下设备上应用 Bootstrap 的“文本中心”,而不是在更大的设备上?

How to apply Bootstrap's "text-center" on MD devices and below , and not on larger devices?

提问人:JAN 提问时间:9/22/2020 最后编辑:JAN 更新时间:9/22/2020 访问量:130

问:

我有一个 div,我想应用 Bootstrap 的类,仅在 MD 设备及以下设备上。text-center

MD以上的任何设备,我不想应用类。text-center

<p className='text-capitalize text-center'>
                    Copyright &copy; Tech Store {new Date().getFullYear()} 
                    All Rights Reserved!
</p>
css reactjs react-bootstrap 客户端

评论

0赞 95faf8e76605e973 9/22/2020
解决这个问题的方法是使用媒体查询和目标屏幕 <= 768px
0赞 Temani Afif 9/22/2020
阅读文档:getbootstrap.com/docs/4.5/utilities/text/#text-alignment 可以添加断点作为前缀

答:

2赞 Becky 9/22/2020 #1

如果您正在寻找引导解决方案,请通过将“text-center”设置为默认值来使用 text-lg-left 类。

  <p className='text-capitalize text-center text-lg-left'>
            Copyright &copy; Tech Store {new Date().getFullYear()} 
             All Rights Reserved!
  </p>

JSFiddle

评论

1赞 Y4roc 9/22/2020
你是说。text-lg-left
0赞 JAN 9/22/2020
好的,谢谢,太好了,它就像一个魅力text-center text-lg-left
1赞 Becky 9/22/2020
很高兴帮助:)