Question

我目前正在使用Twitter Bootstrap 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-ms-6）分离应用于我的.keywords类的CSS有什么想法吗？

Answer 1

Bootstrap 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%;
  }
}

<强> Demo

如何根据Twitter Bootstrap 3中的col-sm-6和col-xs-12为类添加不同的CSS？

1 个答案: