更改输入大小，多个输入，引导5

Question

我试图改变多输入行中输入的大小(引导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 (但是引导式佳能布局总共需要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>

​