在更改分辨率时防止选择项目换行

Question

我有一个问题，我创建了一个div，在里面我放了5个具有已知宽度的选择项目但是当我改变分辨率时，项目开始移动到新行。如果我得到一些帮助，我会很满意。

  #zone-geog{
        height:  100px;
        padding: 0px;
        white-space: nowrap;
        color : white;
      }
  #zone-geog .container{
          background: rgb(6,117,179);
          border-radius: 10px;
          white-space: nowrap;
      }
  #zone-geog .col-xs-12{
        height: 100%;
        padding: 0px;
        white-space: nowrap;
      }
  #zone-geog p{
        padding-left: 15px;
        font-family: 'Roboto Medium';
      }
  .select-prop{
        padding-left: 15px;
        padding-right: 2px;
        width: 263px;
      } 
  .soft-padding{
        padding: 10px;
        border-radius: 10px;
      }
   .margin-zero{
        margin :0px;
      }

      <div id="zone-geog" class="row margin-zero hidden-xs">
        <div class="col-xs-12 margin-zero">
          <div id="menu-geog" class="row  soft-padding  margin-zero">
            <div class="container border-solid-black" style="display:inline-block;">
              <p>Zone Géographique</p>
              <div class="col-xs-2  center-block select-prop">
                <select class="form-control">
                  <option>BASSIN 1</option>
                </select>
              </div>
              <div class="col-xs-2  center-block select-prop">
                <select class="form-control">
                  <option>PERIMETRE1</option>
                </select>
              </div>
              <div class="col-xs-2  center-block select-prop">
                <select class="form-control">
                  <option>SECTEUR 1</option>
                </select>
              </div>
              <div class="col-xs-2  center-block select-prop">
                <select class="form-control">
                  <option>BLOC1</option>
                </select>
              </div>
              <div class="col-xs-2  center-block select-prop">
                <select class="form-control">
                  <option>PARCELLE3</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>

感谢

Answer 1

您可以使用flexbox使其始终在自动溢出的一行中

请参阅代码段：

＆＃13;

＆＃13;

#zone-geog {
  height: 100px;
  padding: 0px;
  white-space: nowrap;
  color: white;
}

#zone-geog .container {
  background: rgb(6, 117, 179);
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto;
  
}

#zone-geog .col-xs-12 {
  height: 100%;
  padding: 0px;
  white-space: nowrap;
}

#zone-geog p {
  padding-left: 15px;
  font-family: 'Roboto Medium';
}

.select-prop {
  padding-left: 15px;
  padding-right: 2px;
  width: 263px;
}

.soft-padding {
  padding: 10px;
  border-radius: 10px;
}

.margin-zero {
  margin: 0px;
}

＆＃13;

<div id="zone-geog" class="row margin-zero hidden-xs">
  <div class="col-xs-12 margin-zero">
    <div id="menu-geog" class="row  soft-padding  margin-zero">
      <div class="container border-solid-black" style="">
        <p>Zone Géographique</p>
        <div class="col-xs-2  center-block select-prop">
          <select class="form-control">
                  <option>BASSIN 1</option>
                </select>
        </div>
        <div class="col-xs-2  center-block select-prop">
          <select class="form-control">
                  <option>PERIMETRE1</option>
                </select>
        </div>
        <div class="col-xs-2  center-block select-prop">
          <select class="form-control">
                  <option>SECTEUR 1</option>
                </select>
        </div>
        <div class="col-xs-2  center-block select-prop">
          <select class="form-control">
                  <option>BLOC1</option>
                </select>
        </div>
        <div class="col-xs-2  center-block select-prop">
          <select class="form-control">
                  <option>PARCELLE3</option>
                </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div>

＆＃13;

＆＃13;

＆＃13;