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

Question

我有两个相等部分的引导行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这样的类，或者如何实现这一点？

Answer 1

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

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

若要使字体大小响应，需要创建自定义类。下面是一个示例：

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

下面是一个工作代码片段：

<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>