在手機和筆記本電腦上選擇標籤

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）在筆記本電腦顯示屏中，選擇應該正常運行，就像從下拉菜單中選擇項目一樣。在移動中，我希望當用戶點擊要顯示的選項時，我們可以在屏幕底部滾動選項。這樣用戶可以滾動瀏覽所有選項並選擇一個值。

我是新的應答設計的東西，所以只是想學習。

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>