我正在尝试使用媒体查询来更改段落和标题的对齐方式,以使其具有响应性
我尝试使用最大宽度,边距和填充,但无法获得所需的结果。
.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>
我想将它们居中对齐在一行中。
答案 0 :(得分:0)
将最小宽度100%用于.col-sm-6
@media (min-width: 576px) and (max-width: 767.98px) { .col-sm-6{ min-width:100% !important;}}