Question

我在Angular2中有以下html。

<div class="col-xs-12 col-lg-8" >
  <p style="font-size: 30px">
    {{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
  </p>
</div>

在我看来，文本在左侧对齐（根据需要）。我怎么说呢，对于col-xs-12，它必须居中？

谢谢。

Answer 1

最好的方法是为您的容器创建一个特定的类，并且仅使用媒体查询来修改移动设备上的文字位置。

以下是遵循BEM CSS naming约定的一般想法：

<style type="text/css">
.thing {
   ... some styles
}

.thing__title {
    text-align: center;
}

// tablets start at 768px width
@media (max-width: 767px) {
    .thing {
        ... some mobile styles
    }

    .thing__title {
        text-align: left;
    }
}
</style>

<div class="thing col-xs-12 col-lg-8">
    <p class="thing__title">... some text</p>
</div>

无需通过添加jQuery向元素添加样式来增加网站的加载时间。
从组件库中定位修饰符类的好主意。特别是您可能要删除的网格或类名称在更高版本中可能会被弃用，从而使您的站点容易受到攻击。

Answer 2

可以使用jquery吗？

$('.col-xs-12').css('text-align','center');

Answer 3

Bootstrap 3 breakpoints and media queries上对Bootstrap 3和4媒体查询有很好的解释。

Bootstrap为您的项目提供了很大的灵活性，但是从细节（例如断点之间的文本对齐）等细节来看，您将需要在自己的CSS中添加媒体查询并根据需要应用样式。

所以您可以尝试这样的事情：

<div class="teacher-info col-xs-12 col-lg-8" >
    <p class="ta-xs-left" style="font-size: 30px">
        {{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
    </p>
</div>

<style>
// Default to center the paragraph to center
.teacher-info p {
    text-align:center;
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
    // When the screen is larger than a tablet, left align the text
    .ta-xs-left {
        text-align:left;
    }
}
</style>

修改

与martinsoender的回答一致，我同意您不应该针对修饰符类，而应该添加自己的类。这次编辑是为了展示我将如何做。

从本质上讲，我会向父级添加一个类以表示什么内容（teacher-info），然后提供要修改类的元素。在这种情况下，我将创建一个类似于引导类的类。 ta-xs-left（{text-align}-{Xtra-Small}-{Alignment}），然后可以在需要的地方重复使用它。

笔记本电脑和移动设备的对齐方式不同

3 个答案: