Question

我正在尝试在调整页面大小时使某些内容具有相同的格式。

看起来很好，在完整模式下，当我尝试缩小它时，它没有正确对齐enter image description here

当我尝试将其缩小时，它看起来像这样：

我m trying to have the same space between the labels and so on. I已经尝试了一段时间，我总是得到一些奇怪的东西，也许它是我看不到的小东西。

<div class="form-group row">
      <label for="inputCustomerAddress" class="col-sm-2 col-form-label align-items-center d-flex" translate>ONBOARDING.CUSTOMER.ADDRESS</label>
      <div class="col-sm-10">
        <input [(ngModel)]="data.customer.lastName" name="inputCustomerAddress" type="text" class="form-control" id="inputCustomerAddress">
      </div>
    </div>

    <div class="form-group row flex-sm-wrap">
      <label for="inputCustomerCity" class="col-form-label col-sm-2 align-items-center d-flex" translate>ONBOARDING.CUSTOMER.CITY</label>
      <div class="col-sm-3 d-flex " style="min-width: 15em;">
        <input [(ngModel)]="data.customer.city" name="inputCustomerCity" type="text" class="form-control city d-flex "
          id="inputCustomerCity">
      </div>        

      <div class="input-group col-sm-7 flex-nowrap ">
        <label for="inputCustomerPhone" class="col-form-label col-sm-4 align-items-center d-flex" translate>ONBOARDING.CUSTOMER.PHONE</label>
        <span class="input-group-addon success col-form-label align-items-center  ">+</span>
        <input [(ngModel)]="data.customer.areacode" name="inputCustomerAreacode" type="text" class="form-control areacode =  " placeholder="45"
        />
        <input [(ngModel)]="data.customer.phone" name="inputCustomerPhone" type="text" class="form-control phone justify-content-end = "
          id="inputCustomerPhone">
      </div>
    </div>

调整Bootstrap D-Flex问题的大小

0 个答案: