首页 > 解决方案 > 为什么我的选择框不合适(引导程序)

问题描述

正如您在下面的第一张图片中看到的那样,我正在尝试重现您在第二张图片中看到的内容。我的问题是选择框不在位置上,我真的不明白为什么。

我试图将宽度设置为自动,使用 col-sm 和 col-md 没有成功。我似乎只能从左到右缩小,但不能从下到上。

如果有人帮忙,将不胜感激。非常感谢 !

这是它的样子:

在此处输入图像描述

它应该是这样的:

在此处输入图像描述

部分代码:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="panel-body">

  <h2>Recevabilité</h2>

  <br>

  <div class="panel-body">

      <div class="form-group">
          <label class="question requis jsRequis control-label col-sm-2 col-md-2" for="SituationTravailleur" id="IdSituationTravailleurLabel"><strong>Type de personne (statut) <span class="sr-only">Obligatoire</span></strong></label>
              <div class="reponse col-sm-10 col-md-10">
                  <select class="form-control valid" data-val="true" data-val-required="Le champ « Type de personne (statut) » est requis." id="IdSituationTravailleur" name="SituationTravailleur" onchange="GererListeDeroulante(this)" style="max-width:1020px" aria-required="true" aria-describedby="IdSituationTravailleur-error" aria-invalid="false"><option value="">- Sélectionner une situation -</option>
<option value="T">Travailleur (article 2 LATMP)</option>
<option value="T18">Travailleur autonome (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option>
<option value="T9">Travailleur autonome considéré comme travailleur (article 9 LATMP)</option>
<option value="PRO">Employeur, dirigeant ou membre du conseil d'admin. d'une personne morale (art. 2 LATMP) - Est une pers inscrite à la CNESST en vertu de l'art. 18 LATMP</option>
<option value="DOM">Domestique (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option>
<option value="RI">Ressource intermédiaire (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option>
<option value="RF">Ressource de type familial (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option>
<option value="ETU">Étudiant en stage non rémunéré (article 10 LATMP)</option>
<option value="GQC">Personne considérée à l'emploi du gouvernement du Québec (article 11 LATMP)</option>
<option value="SC">Personne qui intervient dans le cadre de la Loi sur la sécurité civile (article 12 LATMP)</option>
<option value="SMI">Personne qui assiste les membres d'un service municipal de sécurité incendie (article 12.0.1 LATMP)</option>
<option value="PRI">Personne incarcérée dans un établissement de juridiction provinciale</option>
<option value="BEN">Bénévole (article 13 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 14 LATMP</option>
<option value="PEN">Personne visée par une entente (article 16 LATMP)</option>
<option value="GCA">Empl. gouv. CA visé dans la Loi sur l'indem. agents de l'État (art.17 LATMP) - La CNESST a obtenu confirmation du statut par EDSC</option>
<option value="MIG">Travailleur migran (numéro d'assurance sociale débutant par un 9) - Doit avoir un permis de travail valide</option>
<option value="NON">Personne non considérée comme travailleur au sens de la loi</option>
</select>
                  <span class="field-validation-valid" data-valmsg-for="SituationTravailleur" data-valmsg-replace="true"></span>
              </div>
      </div>
      <div class="form-group">
          <div class="question control-label col-sm-2 col-md-2">
              <span class="glyphicon glyphicon-exclamation-sign glyphicon-label" style="margin-right: 5px;" data-toggle="tooltip" data-placement="top" title="" alt="Pour un type de personne non considéré comme un travailleur, il faut préciser sa situation. Exemples : sans permis de travail, ne respecte pas les conditions de son permis de travail, personne qui exécute un travail illégal, militaire, policier de la Gendarmerie Royale du Canada, etc." data-original-title="Pour un type de personne non considéré comme un travailleur, il faut préciser sa situation. Exemples : sans permis de travail, ne respecte pas les conditions de son permis de travail, personne qui exécute un travail illégal, militaire, policier de la Gendarmerie Royale du Canada, etc.">
              </span>
              <label for="PreciserSituationTravailleur" id="IdPreciserSituationTravailleurLabel">Préciser</label>
          </div>
              <div class="reponse col-sm-4 col-md-4">
                  <textarea class="form-control resizable" cols="20" id="IdPreciserSituationTravailleur" name="PreciserSituationTravailleur" oninput="GererTexteInput(this)" rows="1" disabled=""></textarea>
              </div>
      </div>
      <div class="form-group">
          <fieldset>
              <legend id="IdEmployeurEtablissementQcLabel" class="question control-label col-sm-2 col-md-2"><strong>L'employeur à un établissement au Québec</strong></legend>
                  <div id="IdEmployeurEtablissementQc" class="reponse radio col-sm-10 col-md-10">
                      <div class="radio-inline">
                          <input id="RTRUE" name="EmployeurEtablissementQc" onclick="GererBoutonRadio('IdEmployeurEtablissementQc', 'true')" type="radio" value="True">
                          <label class="" for="RTRUE">Oui</label>
                      </div>
                      <div class="radio-inline">
                          <input id="RFALSE" name="EmployeurEtablissementQc" onclick="GererBoutonRadio('IdEmployeurEtablissementQc', 'false')" type="radio" value="False">
                          <label class="" for="RFALSE">Non</label>
                      </div>
                  </div>
          </fieldset>
      </div>
  </div>

标签: htmlcssbootstrap-4

解决方案


解决的问题只需指定选择高度:

select {
   height: 30px;
]

推荐阅读