使用 Bootstrap 4 在小型显示器上将 div 中的文本居中答案

【问题标题】：Centering text in div on small displays with Bootstrap 4使用 Bootstrap 4 在小型显示器上将 div 中的文本居中
【发布时间】：2018-03-20 04:23:02
【问题描述】：

我有这个由两个相等部分组成的引导行col-md-6：

<div class="row">
<div class="col-md-6">
<h1><strong>ELECTRICAL SERVICES</strong></h1>
</div>
<div class="col-md-6 text-right" style="color:#333;">
<h1>Call <a style="color:#333;" href="tel:XXX">(08) XXX</a></h1>
</div>
</div>

当 sm 显示发生折叠时，我希望文本在这种情况下居中并且更小。

有text-center-md或text-center-md这样的类吗？或者还有什么方法可以实现？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

将text-right 类替换为text-center text-md-right 类。

这将使文本默认居中并在md 或更大的屏幕上右对齐。

要使字体大小具有响应性，您需要创建一个自定义类。这是一个例子：

.h1special {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .h1special {
        font-size: 2.5rem;
    }
}

这是一个工作代码 sn-p：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.h1special {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .h1special {
        font-size: 2.5rem;
    }
}
</style>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1><strong>ELECTRICAL SERVICES</strong></h1>
        </div>
        <div class="col-md-6 text-center text-md-right" style="color:#333;">
            <h1 class="h1special">Call <a style="color:#333;" href="tel:XXX">(08) XXX</a></h1>
        </div>
    </div>
</div>

【讨论】：

很好的额外信息，可能需要了解更多关于 em 和 rem 用法的信息。