调整两个文本框的宽度

Question

我是html表单设计的初学者，我想在html中做一个简单的input-group，输出哪个文本框宽度不同这意味着 surname 文本框 shorter 和 FullName 是 longer 你能建议怎么做吗？

<div class="row h-100">
 <div class="col">
   <div class="input-group">
          <div class="input-group-prepend">
              <span class="input-group-text" id="">First and last name</span>
           </div>
           <input type="text" id="surname" class="form-control" style="width:80px">
           <input type="text" id="FullName" class="form-control" style="width:100%">
     </div>
  </div>

Answer 1

试试这个。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
  <div class="col">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">First and last name</span>
      </div>
      <input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
      <input type="text" id="FullName" class="form-control" placeholder="">
    </div>
  </div>

Answer 2

您忘记删除此在您的姓氏字段中输入代码文本class="form-control"

<div class="row h-100">
    <div class="col">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="">First and last name</span>
        </div>
        <input type="text" id="surname" class="form-control" style="width:80px">
        <input type="text" id="FullName" class="form-control" style="width:100%">
      </div>
    </div>
  </div>

调整两个文本框的宽度

Adjust two text box width

css

width

bootstrap-4