使用bootstrap怎么实现pc端左对齐,移动端居中的效果?

发布于 2022-09-04 12:49:38 字数 463 浏览 6 评论 0

<div class="container">
        <div class="row title">
            <div class="col-sm-10 col-sm-offset-1 col-xs-12">
                <h4 class="text-left caption">决策支持系统</h4>
            </div>
        </div>
</div>

希望“决策支持系统”这几个字pc端左对齐,移动端居中。
我自己再额外写媒体查询能实现

@media (max-width: 768px) {
    .caption{
        text-align: center;
    }
}

请问还有别的办法吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

会傲 2022-09-11 12:49:38

文档

<style type="text/css" media="screen">
    div{
        background-color: #eee;
        font-size: 18px;
        color: #ff0000;
        line-height: 100px;
    }
    .col-xs-12{
        text-align: center;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row title">
            <div>
                <h4 class="col-lg-2 col-xs-12">决策支持系统</h4>
            </div>
        </div>
</div>
</body>

大意了 不能添加css属性 栅格系统并不是删除class 疏忽了 只是标题的话上述代码可以满足,里面还需要文字的话可能需要@media

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文