Bootstrap Gird响应式放置

Question

我是前端开发的新手，需要专家来解决我的问题。

我正在使用引导程序（v：4.4.1）设计页面。我已经尝试了很多，但是没有运气。我已经画了一张图片帮助说明

下面是我的代码

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-6" >
            <img src="../images/bdanew_logo.png" width="150px" style=" display:block; margin:auto;"  />
        </div>
        <div class="col-lg-3 col-sm-6" style="font-family: 'Bellota Text', cursive; font-size:11px;padding-top:2px;">
            <div class="row">
                <div class="col test">
                    <i class="fas fa-user"></i> Khurram Shaikh (logout)
                </div>
            </div>
            <div class="row">
                <div class="col test" >
                    <i class="fas fa-clock"></i>&nbsp;<label id="time"></label> 
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12 heading" >
            <h2>E-Learning Management System</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12" >
            <hr/>
        </div>
    </div>
</div>

和CSS：

@media screen and (min-width: 1024px){
    .container{
        width:80%;
    }
    h2{
        font-family: 'Baloo Chettan 2', cursive;
    }
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
    .container{
        width:100%;
    }
    h2{
        font-family: 'Baloo Chettan 2', cursive;
        font-size:12px;
    }
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
    .container{
        width:100%;
    }
    h2{
        font-family: 'Baloo Chettan 2', cursive;
        font-size:22px;
        margin:0px auto;
    }
    .test{
        text-align:right !important;
    }
    .heading{
        text-align:center;
    }

}

我知道这是基本内容，但我重复一遍，我是前端新手。

谢谢

Answer 1

您是否正确加载了Bootstrap？因为它应该工作：

@media screen and (min-width: 1024px) {
  .container {
    width: 80%;
  }
  h2 {
    font-family: 'Baloo Chettan 2', cursive;
  }
}


/*###Tablet(medium)###*/

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 100%;
  }
  h2 {
    font-family: 'Baloo Chettan 2', cursive;
    font-size: 12px;
  }
}


/*### Smartphones (portrait and landscape)(small)### */

@media screen and (min-width: 0px) and (max-width: 767px) {
  .container {
    width: 100%;
  }
  h2 {
    font-family: 'Baloo Chettan 2', cursive;
    font-size: 22px;
    margin: 0px auto;
  }
  .test {
    text-align: right !important;
  }
  .heading {
    text-align: center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-sm-6">
      <img src="../images/bdanew_logo.png" width="150px" style=" display:block; margin:auto;" />
    </div>
    <div class="col-lg-3 col-sm-6" style="font-family: 'Bellota Text', cursive; font-size:11px;padding-top:2px;">
      <div class="row">
        <div class="col test">
          <i class="fas fa-user"></i> Khurram Shaikh (logout)
        </div>
      </div>
      <div class="row">
        <div class="col test">
          <i class="fas fa-clock"></i>&nbsp;<label id="time"></label>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12 heading">
      <h2>E-Learning Management System</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <hr/>
    </div>
  </div>
</div>