问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
crystalyy
    23511
    <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;
    }
}

    请问还有别的办法吗？

    cssbootstrap
    阅读 5.5k
    1 个回答
    得票最新
    头像
    poikuma
      63522547
      ✓ 已被采纳

      文档

      <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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题