解像度を変更するときに選択項目が折り返されないようにする

Question

divを作成して内部に既知の幅の5個の選択項目を入れる問題がありますが、解像度を変更すると項目が新しい行に移動し始めます。私はいくつかの助けを得るならば、私はgraithfullだろう。

#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

あなたは

は、コードスニペットを参照してください自動オーバーフローを1行で常にそれらを作るためにflexboxを使用することができます。

#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; 
 
}

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