我有 2 個欄位：姓名和電話號碼。
在筆記本電腦中，顯示相同的行，但在移動視圖中顯示 2 行
2個欄位輸入（姓名和電話）如何像筆記本電腦一樣在移動設備中顯示相同的行？
我當前的代碼：https : //jsfiddle.net/bvotcode/eLh36azt/4/
<body>
<form action="/action_page.php" target="_blank">
<div class="w3-center w3-padding-16" style="margin-top:0px">
<div class="w3-row">
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="phone number" name="handynumber" required/>
</div>
</div>
<button class="w3-button w3-green w3-section w3-center" type="submit"> Submit</button>
</form>
</div>
</div>
</body>
謝謝
uj5u.com熱心網友回復：
您示例的主要部分可能是：
<div class="w3-row">
<div class="w3-col" style="width:50%;padding:2px">
<input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="w3-col" style="width:50%;padding:2px">
<input class="w3-input w3-border" type="text" placeholder="phone number" name="handynumber" required/>
</div>
</div>
這樣，每個欄位將始終是螢屏寬度的一半。
薩盧多斯，
uj5u.com熱心網友回復：
label {
display: block;
}
@media screen and (min-width: 769px) {
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
}
}<form action="/action_page.php">
<div class="fields">
<label>
first last name
<input type="text" placeholder="first last name" name="hovaten" required/>
</label>
<label>
Phone number
<input type="text" placeholder="phone number" name="handynumber" required/>
</label>
</div>
<button type="submit"> Submit</button>
</form>uj5u.com熱心網友回復：
嘗試使用此引導程式代碼：
<div class="row">
<div class="col">
<input type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="col">
<input type="text" placeholder="phone number" name="handynumber" required/>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400040.html