為什么我的 select 盒子不合適（引導程序）

Question

正如您在下面的第一張圖片中看到的那樣，我正在嘗試重現您在第二張圖片中看到的內容。 我的問題是選擇框不在 position 中，我真的不明白為什么。

我試圖將寬度設置為自動，使用 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>

Answer 1

問題已解決，只需指定 select 高度：

select {
   height: 30px;
]