Question

在移动视图中使用引导程序时，选择出现在同一行上的菜单是不可选的。可以与我的引导网格使用有关。

查看我的codeply example here

首先尝试默认桌面视图中的选择菜单。工作良好。然后将屏幕大小切换到平板电脑或智能手机，然后切换选择菜单。

现在，当选择菜单出现在不同的行上时，任何视图都没有问题。见codeply example

我在这里缺少什么？它开始让我有点疯狂。

Answer 1

在桌面屏幕上（在bootstrap md 屏幕大小之上），您有一行包含页面控件类，其中有三个列：

tools-sort（使用类 col-md-3 ）
tools-paging（使用类 col-md-2 ）
tools-pagination（使用类 col-md-7 ）

列网格的总和为12，一切都很好。

问题出现在非桌面屏幕上（在bootstrap md 屏幕尺寸下方），您可以在控制台中检查第三个col tools-pagination 是否在全宽度上展开它用选择菜单覆盖两个cols，这就是为什么它们不可选择的原因。

解决此问题的最简单方法是为较小的屏幕添加额外的网格列，例如：

<!-- Pagination and search controls -->
    <div id="ember1330" class="row page-controls ember-view">
        <div class="col col-md-3 col-sm-2 col-xs-6 pull-left tools-sort">
            ...
        </div>
        <div class="col col-md-2 col-sm-2 col-xs-6 pull-left tools-paging">
            ...
        </div>
        <div class="col-12 col-md-7 col-sm-8 col-xs-12 text-right tools-paginaton">
            ...
        </div>
    </div>

我添加的是 col-sm-2 和 col-xs-6 这两个选择框和类 col的cols -sm-8 和 col-xs-12 到分页col。

这样，所有移动设备上的网格都很好，并且 sm 和 xs 屏幕上的网格列总数再次为12。

Bootstrap 3选择菜单在sm或xs视图中无法选择

1 个答案: