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

【问题标题】：How to change the alignment of the paragraph and heading using media query如何使用媒体查询更改段落和标题的对齐方式
【发布时间】：2019-09-22 17:24:27
【问题描述】：

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

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

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

我想将它们在一行中居中对齐。

【问题讨论】：

你想要单独的标题和单独的段落吗？
是的，我希望它们分开，两者都应该一个接一个地显示。
使用这个@media (min-width: 576px) and (max-width: 767.98px) { .col-sm-6{ min-width:100% !important;}}

标签： css bootstrap-4

【解决方案1】：

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

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

【讨论】：