如何將地址放在一起以用于移動視圖-col-xs-12col-sm-12-有解無憂

我是新手。我使用 bootstrap4 回應式 UI：col-lg-x col-md-x col-xs-x col-sm-x。

當我在桌面螢屏中查看時，地址看起來排列得很好。

如何將地址放在一起以用于移動視圖 - col-xs-12 col-sm-12

當我在移動視圖中查看（縮短瀏覽器寬度）時，我注意到地址 1、2、3、4 被其他欄位分開，這導致看起來不太好。

如何將地址放在一起以用于移動視圖 - col-xs-12 col-sm-12

移動視圖的正確排列是

地址1
地址2
地址 3
地址 4
郵政編碼
鎮
狀態

這里是代碼。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class='toggled_content'>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 1<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address1" Class="form-control mandatory" maxlength="100" value="" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <div>
            <p class="textfield-label">Postcode<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="PostCode" Class="form-control mandatory" value="" maxlength="5" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 2 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address2" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Town<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Town" Class="form-control mandatory" value="" maxlength="30" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 3 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address3" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <div>
            <p class="textfield-label">State<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <select name="State" id="State" class="form-control js-select mandatory" disabled>
            <option value="">Please select</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 4 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address4" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
  </div>
</div>

任何人都可以指導我解決我的實施？

謝謝

uj5u.com熱心網友回復：

我為你解決了。我實作了一個上行作為主要父級，并將您的輸入分為 2 列。然后在里面保護了它的 row-col 設計。祝你好運

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class='toggled_content'>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 1<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address1" Class="form-control mandatory" maxlength="100" value="" />
        </div>
      </div>
    </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Address Line 2 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address2" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 3 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address3" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <p class="textfield-label">Address Line 4 </p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Address4" Class="form-control" value="" maxlength="100" />
        </div>
      </div>
    </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <div>
            <p class="textfield-label">Postcode<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="PostCode" Class="form-control mandatory" value="" maxlength="5" />
        </div>
      </div>
    </div>
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield add-colon">
          <p class="textfield-label">Town<span style="color:Red">*</span></p>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <input type="text" ID="Town" Class="form-control mandatory" value="" maxlength="30" />
        </div>
      </div>
    </div>
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 textfield">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12 textfield  add-colon">
          <div>
            <p class="textfield-label">State<span style="color:Red">*</span></p>
          </div>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-12 col-sm-12 textfield">
          <select name="State" id="State" class="form-control js-select mandatory" disabled>
            <option value="">Please select</option>
          </select>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/443696.html

標籤：html jQuery css 用户界面引导程序 4

上一篇：滑塊在較新版本的jquery/ui中無法正常作業

下一篇：如何通過AJAXjquery輸入檔案影像？