更改输入大小多个输入，Bootstrap 5

Question

我正在尝试更改多输入行中输入的大小 (Bootstrap 5)。我可以更改标签大小，但不能更改旁边的两个输入。我想要一个 col-7，另一个 col-1。但是两个输入的大小保持不变（见屏幕截图）。

代码如下：

<div class="row">
        <!-- left column -->
        <div class="col-5">

            <div class="input-group my-3">
                <label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
                <input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
                <input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
            </div>

Answer 1

您可以使用 width 输入 text.use 此代码：

<div class="row">
<!-- left column -->
<div class="col-5">

    <div class="input-group my-3">
        <label class="col-form-label">
            clientname:
        </label>
        <div class="d-flex">
            <input type="text" class="form-control w-25" name="clientname"
            value="" />
        <input type="text" class="form-control " name="clientID"
            value="" style="width: 10%;" />
        </div>
      
    </div>
</div>

Answer 2

你应该把你的标签放在一个单独的列中，像我在这里做的那样给它一个宽度，这样标签列总是采用 col-3 而内容列总是采用 col-9。

然后您可以将内容列视为另一行并将其分成 7-2（但 bootstrap 规范布局总共需要 12 列）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="row">    
  
    <div class="col-3">
      <label class="col-4 col-form-label">Label</label>
    </div>
    
    <div class="col-9">
      <div class="row input-group">
        
        <div class="col-7">
          <input
            type="text"
            class="form-control"
            name="clientname" value="***" />
        </div>
        
        <div class="col-2">                    
          <input
            type="text"
            class="form-control"
            name="clientID"
            value="***" />      
        </div>
        
      </div>      
    </div>    
 </div>

更改输入大小多个输入，Bootstrap 5

Change input size multiple inputs, Bootstrap 5

bootstrap-5