如何将地址放在一起以供移动视图使用 - col-xs-12 col-sm-12
How to put Address together for Mobile view - col-xs-12 col-sm-12
我是 bootstrap 的新人。
我使用 bootstrap4 responsive UI : col-lg-x col-md-x col-xs-x col-sm-x.
当我在桌面屏幕上查看时，地址看起来排列得很好。
当我在移动视图（缩短浏览器宽度）中查看时，我注意到地址 1、2、3、4 被其他字段分隔开，导致看起来不好看。
移动视图的正确排列是
- 地址 1
- 地址 2
- 地址 3
- 地址 4
- 邮政编码
- 城镇
- 州
这里是代码。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>
谁能指导我解决我的实现问题？
谢谢你
我帮你解决了。我将上面一行作为主要父对象，并将您的输入分为 2 列。然后在内部保护其 row-col 设计。祝你好运
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>
我是 bootstrap 的新人。 我使用 bootstrap4 responsive UI : col-lg-x col-md-x col-xs-x col-sm-x.
当我在桌面屏幕上查看时，地址看起来排列得很好。
当我在移动视图（缩短浏览器宽度）中查看时，我注意到地址 1、2、3、4 被其他字段分隔开，导致看起来不好看。
移动视图的正确排列是
- 地址 1
- 地址 2
- 地址 3
- 地址 4
- 邮政编码
- 城镇
- 州
这里是代码。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>
谁能指导我解决我的实现问题？
谢谢你
我帮你解决了。我将上面一行作为主要父对象，并将您的输入分为 2 列。然后在内部保护其 row-col 设计。祝你好运
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>