モバイルとラップトップのディスプレイでタグを選択

Question

私は以下のdivを持っています。私はこの問題に直面しているパネル見出しを含んでいます。パネル本体がきれいに表示されています。だから私はパネルの見出しだけのコードを与えた。

<div class="panel panel-default" style="margin: 8px;margin-top: -10px;"> 
    <div class="panel-heading"> 
     <h5>Legislators By State</h5> 
     <div class="search" style="float: right;margin-top: -29px;"> 
      <form class="form-inline"> 
       <div class="form-group"> 
        <select ng-model="state_select" ng-options="f.name for f in state_select | orderBy:'name'"> 
         <option value="">ALL STATES</option> 
        </select> 
       </div> 
      </form> 
     </div> 
    </div> 

1）私はh5タグは左との両方の携帯電話やノートパソコンのディスプレイ上の右側の選択ボックスに表示されるようにしたいです。現在、ノートパソコンでは動作しますが、携帯電話では動作しません。 2）ラップトップディスプレイでは、selectは通常の動作、つまり項目を選択するドロップダウンのように動作するはずです。モバイルでは、ユーザーが今のように表示されるオプションをクリックすると、画面の下部にスクロール可能なオプションが表示されます。そのため、ユーザーはすべてのオプションをスクロールして1つの値を選択できます。

私はレスポンシブなデザインで新しいので、ちょうど学びたいと思っています。

Answer 1

ブートストラップの列クラス..ここでcol-xs-6 .... "xs"はモバイルデバイスに使用され、 "6"は合計12列のグリッドからそのdivに必要な列の数です。

<div class="panel panel-default" style="margin: 8px;margin-top: -10px;"> 
<div class="panel-heading"> 
    <div class="row"> 
    <div class="col-xs-6"> 
    <h5>Legislators By State</h5> 
    </div> 
    <div class="col-xs-6"> 
    <div class="search"> 
     <form class="form-inline"> 
      <div class="form-group"> 
       <select class="form-control" ng-model="state_select" ng-options="f.name for f in state_select | orderBy:'name'"> 
        <option value="">ALL STATES</option> 
       </select> 
      </div> 
     </form> 
    </div> 
    </div> 
</div> 
</div>