如何在同一 Bootstrap 行中放置多行文本答案

【问题标题】：How to put multiple lines of text in the same Bootstrap row如何在同一 Bootstrap 行中放置多行文本
【发布时间】：2021-12-21 02:33:55
【问题描述】：

我想在每个输入的右侧添加注释。这里是 example 我用引导布局创建的。

<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">User</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">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-md-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            <div class="col-sm-5" style="padding-left: 18px">
              <div class="row">
                <div class="col-sm-12, small">
                  Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
                  "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
                </div>
              </div>
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            <div class="col-sm-5, small" style="padding-left: 18px">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

问题是当屏幕宽度减小时，多行的行无法正常运行。例如：

1.标签（目的）位置已更改：

2。没有文字填充：

更新：

发现1.标签（目的）位置改变问题是由于目的标签的col-md-1。应该使用 col-sm 代替。这是修改后的版本：

<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">User</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">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            
            <div class="col-sm-5 small" style="padding-left: 3px">
              Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
              "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            
            <div class="col-sm-5 small" style="padding-left: 3px">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

现在剩下的唯一问题是文本填充。 padding-left 3px 全屏时很好，但屏幕缩小时不行：

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个

<div>
    <section class="content container-fluid">
   <form id="submitForm">
        <fieldset>
        <br>
        <div class="form-group row mb-2">
            <label for="userId" class="col-sm-1 col-form-label">User</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">
                If your name is not available, please contact the Officer.
            </div>
        </div>  
        
        <div class="form-group row mb-2">
            <label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
                <input type="text" id="purposeNames" class="form-control" placeholder="Purpose"  />                    
            </div>
            <div class="col-sm-5" style="padding-left: 18px">
                <div class="row">
                   <div class="col-sm-12, small">
                    Feel free to select more than one purpose per ticket e.g. email + instant messaging.
                    Such purpose combinations will only proportionally affect purpose statistics.
                    Please do not use online time that was initially requested for purposes of the category "Not affecting personal quota"
                    (e.g. chores) also for checking personal emails, instant messaging etc.
                    Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.                  
                   </div>
               </div>
            </div>          
        </div>  
        
        <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            <div class="col-sm-5 small" style="padding-left: 18px">
                Please use combination of letter, symbol & number.
            </div>
        </div>  
      </fieldset>
    </form>
  </section>
</div>

【讨论】：

您的回答应该包括对更改的一些解释。不要让我们逐行审查您所做的事情。
请忽略我之前的评论。无论如何，使用您的示例会导致输入之间的填充大小不同，并且无法解决我的问题“2。没有文本填充”，请参见：codepen.io/lennyy/pen/zYdaORz。这是我将所有最后一列填充更改为“padding-left：3px”后的更新：codepen.io/lennyy/pen/JjyZPGJ。现在全屏时看起来很好，但是当屏幕宽度减小时，“2.没有文本填充”的问题仍然存在。
@len，删除你之前的评论。

【解决方案2】：

你可以把文本放在一个div里面，并添加css属性overflow:hidden

    <div class="col-sm-5, small" style="padding-left: 18px">
        <div class="sample">
            Feel free to select more than one purpose per ticket e.g. email + instant messaging.
            Such purpose combinations will only proportionally affect purpose statistics.
            Please do not use online time that was initially requested for purposes of the category "Not affecting personal quota"
            (e.g. chores) also for checking personal emails, instant messaging etc.
            Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
        </div>              
       </div>

CSS：

      .sample
      {
          overflow: hidden;
      }

【讨论】：

谢谢。但是文本填充大小仍然不正确。我必须在 col-sm-5 处使用“padding-left：18px”来防止“2.无文本填充”问题。这会导致输入之间的距离与全屏时它的注释太宽。查看我的更新：codepen.io/lennyy/pen/RwZyomX
在您发送的代码中需要做一些更改。这是代码笔网址：codepen.io/allenjohnson8/pen/xxLjYjW
你的新例子在屏幕宽度缩小到60%左右时出现“1.Label（Purpose）位置改变”的问题。

【解决方案3】：

你的类属性中有逗号。这是无效的，并导致后面的类不被应用。当它们被删除（连同讨厌的内联样式）时，一切都按预期工作。

甚至不需要行嵌套。我已经删除了它以及换行符，它不应该用于布局并且显然没有做任何事情。

默认情况下，对于移动设备 (xs)，Bootstrap 会将输入置于标签下方，因此在窄屏幕上为输入提供了空间。我不建议更改它，但如果您愿意，只需使用 col-xs-* 而不是 col-sm-*，这样您就不会忽略最小的断点。

<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>
          <div class="form-group row">
            <label for="userId" class="col-sm-1 col-form-label">User</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">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-md-1 col-form-label">Purpose</label>
            <div class="col-sm-6">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            
            <div class="col-sm-5 small">
              Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
              "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            
            <div class="col-sm-5 small">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

【讨论】：

是的，你对逗号是正确的。但是你的例子在屏幕宽度缩小到 60% 左右时仍然存在“1. Label (Purpose) position changed”的问题。
查看我的更新答案。

【解决方案4】：

使用 padding-right: 3px at input 解决我的填充问题：

<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">User</label>
            <div class="col-sm-6"  style="padding-right: 3px">
              <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">
              If your name is not available, please contact the Officer.
            </div>
          </div>

          <div class="form-group row">
            <label for="purposeNames" class="col-sm-1 col-form-label">Purpose</label>
            <div class="col-sm-6"  style="padding-right: 3px">
              <input type="text" id="purposeNames" class="form-control" placeholder="Purpose" />
            </div>
            
            <div class="col-sm-5 small">
              Feel free to select more than one purpose per ticket e.g. email + instant messaging. Such purpose combinations will only proportionally affect purpose statistics. Please do not use online time that was initially requested for purposes of the category
              "Not affecting personal quota" (e.g. chores) also for checking personal emails, instant messaging etc. Instead, request separate internet access by selecting the desired purpose category e.g. email; instant messaging etc.
            </div>
          </div>

          <div class="form-group row">
            <label for="userPassword" class="col-sm-1 col-form-label">Password</label>
            <div class="col-sm-6"  style="padding-right: 3px">
              <input type="password" class="form-control" id="userPassword" placeholder="Password">
            </div>
            
            <div class="col-sm-5 small">
              Please use combination of letter, symbol & number.
            </div>
          </div>
        </fieldset>
      </form>
    </section>
  </div>
</body>

【讨论】：