在同一行形成输入列：不要在移动视图中换行

Question

我有 2 个字段：姓名和 phone 号码。

在笔记本电脑中，显示同一行，但在移动设备视图中显示 2 行

2 个字段输入（名称和 Phone）如何在移动设备上像笔记本电脑一样显示同一行？

我当前的代码：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>

谢谢

Answer 1

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>

Answer 2

尝试使用此 bootstrap 代码：

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

Answer 3

您的示例的主要部分可能是：

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

这样一来，每个字段将始终是屏幕宽度的一半。

萨卢多斯，

在同一行形成输入列：不要在移动视图中换行

form input columns in same line: dont line break in Mobile view

html

forms

w3.css