Bootstrap 3列合理堆叠加浮动右元素

Question

我正在尝试使用Bootstrap 3的col布局，以便在小屏幕上显示3列下拉列表。但是，当我尝试这个时，我得到了奇怪的结果。

我需要做的是，当视口缩小时，所有3个下拉（及其标签）以合理的方式堆叠在一起。

以下是我希望它的外观：

然而，正如你从这个小提琴中看到的那样，它根本不起作用：

它们由于float:left而重叠，或者下拉列表和标签分开并在单独的行上结束。

http://jsfiddle.net/g8u45rmz/1/

代码非常简单：

<div class="col-xs-4">
  <span class='select-subfolder-label'>Subfolder:</span>
        <select id='test2' class='folder-sel'>
             <option>All</option>
        </select>
</div>

另外，我需要右侧的字形图标始终向右浮动，即使列按照我想要的方式堆叠。

我如何实现这两个目标？感谢帮助。

Answer 1

＆＃39; col-xs-4＆＃39;班级基本上说，即使在超小屏幕上，这也会占据12列中的4列。

尝试使用col-md-4或col-sm-4，当屏幕进入xs范围时，它会切换到全宽并按预期堆叠。

Answer 2

只需在form-control上添加select课程即可获得所需的结果。

对于较小窗口上的堆叠select菜单，将类col-xs-12添加到父div将起作用。这将使div在小型设备上使用它可用的所有宽度。对于中小型窗口，我使用了col-sm-4和col-md-4，这将更改它，以便所有div显示为内联。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class='row subnav'>
  <div class="col-xs-12 col-sm-4 col-md-4">	<span class='select-folder-label'>Folder:</span>

    <select class="form-control" id='test1' class='folder-sel'>
      <option>All</option>
    </select>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4">	<span class='select-subfolder-label'>Subfolder:</span>

    <select class="form-control" id='test2' class='folder-sel'>
      <option>All</option>
    </select>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4">	<span class='select-other-label'>Other:</span>

    <select class="form-control" id='test2' class='folder-sel'>
      <option>All</option>
    </select>
  </div>
  <div id="subnav_gear" class='dropdown nav navbar navbar-nav navbar-right'> <span class='glyphicon glyphicon-cog'></span>

  </div>
</div>