文章/答案/技术大牛

发布

社区首页 >问答首页 >如何根据Twitter启动3中的class 6和col-xs-12，为类设置不同的CSS？

问如何根据Twitter启动3中的class 6和col-xs-12，为类设置不同的CSS？
EN

Stack Overflow用户

提问于 2014-03-17 23:19:49

回答 1查看 1.7K关注 0票数 0

我目前正在使用Twitter启动3设计一个联系形式的反应方式。我的HTML如下所示：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-6 logo">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="col-md-6 col-sm-6">
            <p class="keywords">Originaux, uniques et faits-main, <br>
            des cadeaux pour toutes les occasions.
            </p>
        </div>
    </div>
</div>

我的CSS：

.col-xs-12 > .keywords{
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            vertical-align: middle;
            font-size: 115%;

        }

        .col-sm-6 > .keywords{
        display: table-cell;
        float: none;
        height: 230px;
        text-align: center;
        vertical-align: middle;
        font-size: 120%;
        }

目前，我的小设计中心正确地我的标志和我的段落对侧，但在这里应用的利润率报告在我额外的小设计(这是堆叠的)，这使我巨大的利润。

是否可以根据母类(col-xs-12或col 6)来分离应用于我的.keywords类的CSS？

html

css

twitter-bootstrap

margins

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-18 00:22:25

引导col-*-*类依赖媒体查询来调整它们的大小。

你需要使用同样的技术。首先对`.keywords进行样式化，然后在设备变得更大时对其进行调整(首先是移动)。

.keywords{
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  vertical-align: middle;
  font-size: 85%;
}

@media (min-width : 768px) {
  .keywords{
    display: table-cell;
    float: none;
    height: 230px;
    text-align: center;
    vertical-align: middle;
    font-size: 120%;
  }
}

演示

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22467410

复制

相似问题

问如何根据Twitter启动3中的class 6和col-xs-12，为类设置不同的CSS？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据Twitter启动3中的class 6和col-xs-12，为类设置不同的CSS？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据Twitter启动3中的class 6和col-xs-12，为类设置不同的CSS？
EN