时间戳

首页 > 解决方案 > 引导类未按预期工作

html - 引导类未按预期工作

问题描述

以下 HTML 代码看起来像使用引导程序，但它不是响应式的，如果我在移动设备和平板电脑中使用，它应该可以作为响应式工作，但它仍然看起来像移动设备和平板电脑中的桌面视图。

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

如何使上述代码响应？

标签： htmlcssangulartwitter-bootstrapbootstrap-4

解决方案

为确保所有设备的正确渲染和触摸缩放，请将响应式视口元标记添加到您的<head>.

来源：Bootstarp 4 文档

添加视口元标记来解决这个问题：

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

谢谢！

推荐阅读