代码之家  ›  专栏  ›  技术社区  ›  SmartestVEGA

引导类未按预期工作

  •  0
  • SmartestVEGA  · 技术社区  · 7 年前

    下面的HTML代码看起来像是使用引导程序,但是它没有响应性,如果我在mobile和tablet中使用,它应该是响应性的,但是它看起来仍然像mobile和tablet中的桌面视图。

    <div class="overlap"></div>
    <div class="container">
      <div class="row justify-content-center pb-5 pt-3" >
        <div class="col-md-5 block mt-3">
          <form (ngSubmit)="SearchBus(f)" #f=ngForm>
            <div class="row">
              <div class="form-group col-md-6">
                <label>Leaving from</label>
                <select (change)="leave($event)"name="leaving_form" required ngModel class="form-control form-control-sm">
                  <option value="">Select Place</option>
                  <option value="dhaka">Dhaka</option>
                  <option value="comilla">Comilla</option>
    
                  <option value="chittagong">Chittagong</option>
                </select>
              </div>
              <div class="form-group col-md-6">
                <label>Going To</label>
                <select name="going_to"  [ngModel]="place[0].key"   required class="form-control form-control-sm">
    
                  <!-- <option value="1109001">Comilla</option>
                  <option value="1109002">Chittagong</option>
                  <option value="1109003">Sylet</option>
                  <option value="1109004">Barishal</option> -->
    
                  <option *ngFor="let p of place"  [value]="p.key">{{p.value}}</option>
                </select>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-12">
                <label for="">Departing On</label>
                <input type="date" required class="form-control form-control-sm" ngModel name="depart_date" >
              </div>
    
            </div>
            <button [disabled]="!f.valid"class="btn btn-block mt-3 btn-search btn-sm"> <i class="fas mr-2 fa-search"></i> Search Buses</button>
          </form>
        </div>
        <div class="col-md-5 slider mt-3 ">
          <img src="../assets/img/redBus-coupons-offers-1586.PNG" class="img-fluid">
        </div>
      </div>
    </div>
    

    如何使上述代码具有响应性?

    1 回复  |  直到 7 年前
        1
  •  3
  •   Community CDub    5 年前

    要确保所有设备的正确渲染和触摸缩放,请添加 响应视口元标记 <head> .

    Bootstarp 4 docs

    添加视口元标记以解决此问题:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    

    谢谢!

    推荐文章