如何在同一Bootstrap row中放置多行文本并解决响应式布局异常

实现需求 #

我需要在每个表单输入框的右侧添加备注说明，以下是我用Bootstrap布局实现的初始代码：

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div>
    <section class="content container-fluid">
      <form id="submitForm">
        <fieldset>
          <br>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">用户</label>
            <div class="col-sm-6">
              <select class="form-control" id="userId">
                <option value="1">Alex</option>
                <option value="39">Kent</option>
                <option value="6">Nick</option>
              </select>
            </div>
            <div class="col-sm-5 small" style="padding-left: 18px">
              如果列表中没有你的名字，请联系管理人员。
            </div>
          </div>
          <div class="form-group row">
            <label for="purposeNames" class="col-md-1 col-form-label">用途</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="用途" />
            </div>
            <div class="col-sm-5" style="padding-left: 18px">
              <div class="row">
                <div class="col-sm-12 small">
                  每张工单可选择多个用途，例如邮件+即时通讯，多用途组合只会按比例影响用途统计数据。原本申请归类为“不占用个人配额”类用途（例如杂务）的上网时长，请勿同时用于查收个人邮件、使用即时通讯等。如果有相关需求，请单独选择对应用途分类（如邮件、即时通讯等）申请上网权限。
                </div>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">密码</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="密码">
            </div>
            <div class="col-sm-5 small" style="padding-left: 18px">
              请使用字母、符号和数字的组合密码。
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

初始异常表现 #

屏幕宽度缩小时，包含多行文本的row布局出现两处异常：

• 用途标签位置偏移
  
• 备注说明文本无内边距
  

已完成修复内容 #

标签位置偏移问题已解决：原因为用途标签使用了col-md-1类，替换为col-sm-1类后问题修复，修改后代码如下：

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div>
    <section class="content container-fluid">
      <form id="submitForm">
        <fieldset>
        <br>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">用户</label>
            <div class="col-sm-6">
              <select class="form-control" id="userId">
                <option value="1">Alex</option>
                <option value="39">Kent</option>
                <option value="6">Nick</option>
              </select>
            </div>
            <div class="col-sm-5 small" style="padding-left: 3px">
              如果列表中没有你的名字，请联系管理人员。
            </div>
          </div>
          <div class="form-group row">
            <label for="purposeNames" class="col-sm-1 col-form-label">用途</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="用途" />
            </div>
            <div class="col-sm-5 small" style="padding-left: 3px">
              每张工单可选择多个用途，例如邮件+即时通讯，多用途组合只会按比例影响用途统计数据。原本申请归类为“不占用个人配额”类用途（例如杂务）的上网时长，请勿同时用于查收个人邮件、使用即时通讯等。如果有相关需求，请单独选择对应用途分类（如邮件、即时通讯等）申请上网权限。
            </div>
          </div>
          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">密码</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="密码">
            </div>
            <div class="col-sm-5 small" style="padding-left: 3px">
              请使用字母、符号和数字的组合密码。
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

待解决问题 #

当前仅剩余备注文本内边距的响应式适配问题：设置固定padding-left:3px在全屏显示时效果正常，但屏幕宽度缩小后内边距不符合预期，效果如下：

请问该内边距响应式适配问题应该如何解决？

内容的提问来源于stack exchange，提问作者len