768pxより小さいビューポート用のブートストラップフォームインライン

Question

以下の例では、すべてのフォーム要素が1行で表示されます。ブートストラップクラスform-inlineは小さなビューポートでは動作しません。公式ブートストラップsiteから：

これは、少なくとも768px 幅でビューポート内のフォームに適用されます。

#containerGraph { 
 
    position: relative; 
 
    width: 900px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    resize: horizontal; 
 
} 
 
/* set the position attribute for all div elements inside the mainContainer*/ 
 

 
#containerGraph > div { 
 
    position: absolute; 
 
} 
 
.paramElement { 
 
    width: 200px; 
 
    height: auto; 
 
    border-radius: 18px; 
 
    text-align: center; 
 
    background-color: #e6e6e6; 
 
    color: #4d4d4d; 
 
    font-family: Verdana, Helvetica, sans-serif; 
 
    padding-bottom: 5px; 
 
    font-size: small; 
 
    margin-top: 10px; 
 
} 
 
.paramElementHeading { 
 
    font-size: larger; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
} 
 
.paramElementForm { 
 
    margin-top: 10px; 
 
} 
 
.paramElementForm > input { 
 
    width: 80px; 
 
} 
 
.column1 { 
 
    margin-left: 3px; 
 
} 
 
.column2 { 
 
    margin-left: 163px; 
 
} 
 
.column3 { 
 
    margin-left: 323px; 
 
} 
 
.column4 { 
 
    margin-left: 483px; 
 
} 
 
.column5 { 
 
    margin-left: 643px; 
 
} 
 
.column6 { 
 
    margin-left: 803px; 
 
} 
 
.column7 { 
 
    margin-left: 963px; 
 
} 
 
.column8 { 
 
    margin-left: 1123px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containerGraph"> 
 

 

 
    <div class="column1 paramElement" id="param1"> 
 
    <div class="paramElementHeading"> 
 
     Title Title Title Title 
 
    </div> 
 

 
    <form class="form-inline" style="width:30px;"> 
 
     <div class="form-group"> 
 
     <label for="focusedInput">Focused</label> 
 
     <input class="form-control" id="focusedInput" type="text"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <select class="form-control" style="width:auto;" id="sel1"> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
      <option>4</option> 
 
     </select> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

は this同様の質問から第2の解決策は、私の場合には機能していません。そして、私は最初の答えで述べたようにグリッドシステムを使いたくありません。

Answer 1

これを試してみてください：

チェックデモhere

CSS：

@media (max-width: 767px) { 
    .form-inline > .checkbox { 
    margin-left: 5px; 
    margin-right: 5px; 
    } 
    .form-inline .form-control { 
    width: auto; 
    display: inline-block; 
    } 
    .form-inline label { 
    margin-right: 5px; 
    } 
    .form-inline .form-group { 
    display: inline-block; 
    margin-bottom: 0; 
    vertical-align: middle; 
    } 
}