Как использовать Bootstrap 4, чтобы текст справки имел ширину 100%, а поле ввода - нет

Question

Используя группы форм Bootstrap, у меня есть метка, поле ввода и текст справки по вертикали.Как я могу иметь ширину поля моего выбора, чтобы он не был 100% ширины, но сохранить текст справки 100% ширина

Установите это в https://jsfiddle.net/paultaylor/0y9uyn76/2/

Я хочу, чтобы выбор толькобыть 30-канальным, и я попытался добавить этот стиль к внешнему div, но, конечно, он также применяется, чтобы помочь.поместив метку и ввод в одну и ту же строку вместо разных строк, эта неудачная попытка показана в приведенном ниже коде и в 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

Вы можете попробовать следующий структурный код начальной загрузки с классом начальной загрузки d-block и d-inline-block без каких-либо встроенных CSS.

<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/

Answer 2

Вы можете окружить выделение с помощью div и применить к нему стиль 30ch, он изменяет размер выделенного элемента без изменения порядка других элементов управления

<div>
  <div class="form-group">
    <div>
      <label for="debugLevel" id="debugLevellabel">
                Debug Log Level
            </label>
      <div style="width:30ch">
        <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>
    </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>
      <div style="width:30ch">
        <select class="custom-select" 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>
    </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>