笔记本电脑和手机的不同对齐方式答案

【问题标题】：Different alignment for laptop and mobile笔记本电脑和手机的不同对齐方式
【发布时间】：2018-09-18 04:30:57
【问题描述】：

我在 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 什么时候必须居中？

谢谢。

【问题讨论】：

什么版本的引导程序？快速的媒体查询可以随心所欲。

标签： css angular

【解决方案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 来为元素添加样式来增加网站的加载时间。
将组件库中的修饰符类作为目标是个坏主意。尤其是您的网格，因为您可能会删除它或类名可能在以后的版本中被弃用，从而使您的网站容易受到攻击。

【讨论】：

关于定位修饰符类的好点。我没有考虑在我的回答中指出这一点。

【解决方案2】：

你会用 jquery 吗？

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

【讨论】：

【解决方案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 的回答，我同意您不应针对修饰符类，而应添加自己的类。此编辑是为了展示我将如何做到这一点。

本质上，我会向父级添加一个类来表示持有的内容（教师信息），然后给出我想要修改一个类的元素。在这种情况下，我创建了一个类似于引导类的类。 ta-xs-left ({text-align}-{Xtra-Small}-{Alignment})，然后它可以在任何你需要的地方重复使用。

【讨论】：