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的列类..这里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>

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

1 个答案: