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

时间:2019-05-04 11:33:18

标签: css3 bootstrap-4

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

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

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

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

1 个答案:

答案 0 :(得分:0)

将最小宽度100%用于.col-sm-6

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