在手机和笔记本电脑上选择标签

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>