css - 如何使用 Bootstrap 4 使帮助文本为 100% 宽度但输入字段不是

Question

使用 Bootstrap 表单组，我有垂直堆叠的标签、输入字段和帮助文本。我怎样才能让我选择的字段宽度不是 100% 宽度，但让帮助文本保持 100% 宽度

在 https://jsfiddle.net/paultaylor/0y9uyn76/2/ 中进行设置

我希望 select 仅为 30ch，并且我尝试将此样式添加到外部 div，但当然它也适用于帮助。

然后我尝试将样式添加到 select 元素，但由于某种原因破坏了格式，将标签和输入放在同一行而不是不同的行，此失败尝试显示在下面的代码和 jsfiddle 中。

<div>
<div class="form-group">
  <div>
      <label for="debugLevel" id="debugLevellabel">
          Debug Log Level
      </label>
      <select class="custom-select" style="width:30ch" name="debugLevel" id="debugLevel" aria-describedby="debugLevelhelp">

              <option value="0">
                  Severe
              </option>
              <option selected="selected" value="1">
                  Warning
              </option>
              <option value="2">
                  Info
              </option>
              <option value="3">
                  Config
              </option>
              <option value="4">
                  Fine
              </option>
              <option value="5">
                  Finer
              </option>
              <option value="6">
                  Finest
              </option>

      </select>
  </div>
  <p id="debugLevelhelp" class="form-text text-muted">
      Sets how much logging is written to the debug log, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong
  </p>
</div>
<div class="form-group">
  <div>
      <label for="ioDebugLevel" id="ioDebugLevellabel">
          Debug IO Log Level
      </label>
      <select class="custom-select" style="width:30ch" name="ioDebugLevel" id="ioDebugLevel" aria-describedby="ioDebugLevelhelp">

              <option value="0">
                  Severe
              </option>
              <option selected="selected" value="1">
                  Warning
              </option>
              <option value="2">
                  Info
              </option>
              <option value="3">
                  Config
              </option>
              <option value="4">
                  Fine
              </option>
              <option value="5">
                  Finer
              </option>
              <option value="6">
                  Finest
              </option>

      </select>
  </div>
  <p id="ioDebugLevelhelp" class="form-text text-muted">
      Sets how much logging is written to the debug log when SongKong reads files or saves changes to files, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong
  </p>
</div>
</div>

Answer 1

您可以尝试在没有任何内联 css 的情况下使用 Bootstrap 类 d-block 和 d-inline-block 跟随 Bootstrap 结构代码。

<div class="form-group">
  <label class="d-block" for="debugLevel" id="debugLevellabel"> Debug Log Level </label>
  <div class="d-inline-block">
    <select class="custom-select" name="debugLevel" id="debugLevel" aria-describedby="debugLevelhelp">
      <option value="0"> Severe </option>
      <option selected="selected" value="1"> Warning </option>
      <option value="2"> Info </option>
      <option value="3"> Config </option>
      <option value="4"> Fine </option>
      <option value="5"> Finer </option>
      <option value="6"> Finest </option>
    </select>
  </div>
  <p id="debugLevelhelp" class="form-text text-muted"> Sets how much logging is written to the debug log, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong </p>
</div>
<div class="form-group">
  <label class="d-block" for="ioDebugLevel" id="ioDebugLevellabel"> Debug IO Log Level </label>
  <div class="d-inline-block">
    <select class="custom-select" name="debugLevel" id="debugLevel" aria-describedby="debugLevelhelp">
      <option value="0"> Severe </option>
      <option selected="selected" value="1"> Warning </option>
      <option value="2"> Info </option>
      <option value="3"> Config </option>
      <option value="4"> Fine </option>
      <option value="5"> Finer </option>
      <option value="6"> Finest </option>
    </select>
  </div>
  <p id="debugLevelhelp" class="form-text text-muted"> Sets how much logging is written to the debug log, increasing the log level can help Jthink identify the cause of any problems encountered in SongKong </p>
</div>

演示:https://jsfiddle.net/0y9uyn76/4/