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

这是一个有效的代码段：

＆＃13;

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

＆＃13;

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

1 个答案: