Question

我有6个input-group-btn，但是问题是当我单击一个下拉按钮时，下拉菜单显示在input-group-btn后面：

我尝试了z-index：0;但似乎不起作用：

<div id="indica-evolu-mobile" class="col-xs-12 collapse hidden-lg hidden-md">
              <button type="button" class="close">&times;</button>
              <div  id="indica-mobile" class="row well-sm theme-color margin-mobile-menu">
                <div class="col-xs-12">
                  <div class="row">
                    <div class="col-xs-12">
                      <h2 class="text-white-sans-serif">Zone géographique</h2>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
                    <div class="col-xs-12 select-prop">
                      <div id="basins" class="input-group-btn chelect disabled" name="basins" data-model="Basins" data-model-id="1" data-next="Perimeters">
                        <button tabindex="-1" class="btn btn-default" type="button" style="background-color:#1bcef7" disabled>Bassins</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
                          <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu" style = "color:black;">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
                    <div class="col-xs-12 select-prop" style="margin-top:10px">
                      <div class="input-group-btn chelect disabled" id="perimeters" class="form-control" name="perimeters" data-model="Perimeters" data-model-id="2" data-previous="Basins" data-next="Sectors">
                        <button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d84b38" disabled>Périmètres</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
                          <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
                    <div class="col-xs-12 select-prop" style="margin-top:10px">
                      <div class="input-group-btn chelect disabled" id="sectors" class="form-control" name="sectors" data-model="Sectors" data-model-id="3" data-previous="Perimeters" data-next="Blocks">
                        <button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d87837" disabled>Secteurs</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
                          <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px; ">
                    <div class="col-xs-12 select-prop" style="margin-top:10px">
                      <div class="input-group-btn chelect disabled" id="blocks" class="form-control" name="blocks" data-model="Blocks" data-model-id="5" data-previous="Sectors" data-next="Exploitations">
                        <button tabindex="-1" class="btn btn-default" type="button" style="background-color:#d8cf37" disabled>Blocs</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
                          <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
                    <div class="col-xs-12 select-prop" style="margin-top:10px">
                      <div class="input-group-btn chelect disabled" id="exploitations" class="form-control" name="exploitations" data-model="Exploitations" data-model-id="6" data-previous="Blocks" data-next="Crops">
                        <button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d8bf" disabled>Exploitations</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
                          <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style="margin-bottom:20px; margin-right:0px;">
                    <div class="col-xs-12 select-prop" style="margin-top:10px">
                      <div class="input-group-btn chelect disabled" id="crops" class="form-control" name="crops" data-model="Crops" data-model-id="7" data-previous="Exploitations">
                        <button tabindex="-1" class="btn btn-default" type="button" style="background-color:#37d857" disabled>Parcelles</button>
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" disabled>
                          <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="row" style="margin-top:35px">
                    <div class="col-xs-12">
                      <h2 class="text-white-sans-serif">Paramètre</h2>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style= "position:relative; z-index:0;">
                    <div class="col-xs-12 select-prop">
                      <label for="parametertypes" style = "color: White;">Paramètre</label>
                      <select id="parametertypes">
                        <option value="" selected disabled>Sélectionner un paramètre</option>
                      </select>
                    </div>
                  </div>
                  <div class="row row-select center-vertically" style= "position:relative; z-index:0;">
                    <div class="col-xs-12 select-prop">
                      <label for="dates-list" style = "color:white;">Date</label>
                      <input id="dates-list" type="text" class="form-control date-list indica_date_input" placeholder ="Sélectionner une date" value="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

有人告诉我将每个输入放在div内，但这似乎不是一个好主意。如果您对导致此行为的原因有一个了解，我将很高兴知道。

下拉菜单位于input-group-btn下

0 个答案: