时间戳

首页 > 解决方案 > 如何使用媒体查询更改段落和标题的对齐方式

css - 如何使用媒体查询更改段落和标题的对齐方式

问题描述

我正在尝试使用媒体查询更改段落和标题的对齐方式以使其响应

我尝试使用最大宽度、边距和填充，但无法获得所需的结果。

.about-background h2 {
  margin-top: 2em;
  padding-right: 3.5em;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .lead {
    font-size: 0.9em;
    width: 100%;
    max-width: 768px;
  }
  .about-background {
    background: white;
  }
  .about-background h2 {
    font-size: 0.6;
    margin-left: 8em;
    width: 100%;
  }
}
<div class="jumbotron about-background">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-sm-6">
        <h2><strong>We are InCFO</strong></h2>
        <p class="lead" style="margin-top: 4em; padding-right: 7em;">Our mission to provide a range of financial services to companies to make their financial needs easy that needed to run and expand their business.</p>
      </div>
      <div class="col-sm-6">
      </div>
    </div>
    <div class="arrow bounce">
      <a class="fa fa-arrow-down fa-3x" href="#do" v-smooth-scroll></a>
    </div>
  </div>
</div>

我想将它们对齐在一条线上。

标签： cssbootstrap-4

解决方案

对 .col-sm-6 使用最小宽度 100%

@media (min-width: 576px) and (max-width: 767.98px) { .col-sm-6{ min-width:100% !important;}}

推荐阅读