在移动和笔记本电脑显示器上选择标签

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

使用，Bootstrap 的 Column 类.. 这里 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>