Question

我正在尝试在下拉选择框旁边放置一个向下箭头的图像。我正在使用Bootstrap 3.0 css。

通过以下标记，我能够实现我的目标，但没有响应（即当我在移动模式的Chrome上看到它时）图像被推到下拉列表下方。

我的标记如下：

<div class="form-group">
            <label class="col-md-4 control-label">Package</label>
            <div class="col-md-3">
                    <select class="form-control" id="selPackage" ng-model="package"
                            ng-options="package.Name for package in packages"
                            >
                        <option value=""></option>
                    </select>

                {{package.Description}}
            </div>
            <div class="col-md-1 pull-left" style="margin-left:-20px;">
                <img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">

            </div>

        </div>

但在移动模式下它看起来像这样：

请你在这里强调一下这个问题吗？

Answer 1

不确定箭头 - 但是你所描述的问题只是你没有在标记上设置任何xs或sm类，因此bootstrap默认是在较小的视口处将列显示为完整行（因为你没有指定显示它们的内容。）

您需要尝试根据需要进行正确的布局 - 但必须在其中包含col-xs-X和col-sm-X类。另请注意，您在其中嵌套了div - 因此内部col-md-3实际上是父列的3列。

<div class="form-group">
   <label class="col-xs-8 col-sm-10 col-md-4 control-label">Package</label>
      <div class="col-xs-8 col-sm-10 col-md-3">
         <select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
             <option value=""></option>
          </select>
           {{package.Description}}
        </div>
        <div class="col-xs-4 col-sm-2 col-md-1 pull-left" style="margin-left:-20px;">
         <img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
  </div>

Answer 2

不要使用内联样式，将CSS放入单独的文件中，然后包含media queries以更改不同视口的位置。这样，您可以根据页面大小控制不同的屏幕尺寸。 Bootstrap内置了很多响应元素，就像grid system一样。

因此，在这个例子中，在箭头周围的div上添加一个类来定位它，并将其中的图像像这样移动到你喜欢的位置，但是你也可以使用网格系统来也可以更改选择框和箭头的宽度。

<div class="form-group">

    <label class="col-md-4 control-label">Package</label>

    <div class="col-sm-3 col-md-3">
        <select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
            <option value=""></option>
        </select>
        {{package.Description}}
    </div>

    <div class="col-sm-1 col-md-1 pull-left select-arrow" style="margin-left:-20px;">
        <img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
    </div>

</div>

我在箭头图像周围的div中添加了一类选择箭头，并将col-sm类添加到两个div中，这将改变移动设备等小型设备的宽度。看一下grid options，它解释了你可以使用什么类以及何时使用。

来自Bootstrap文档的网格选项的图像。

如何在下拉Bootstrap旁边放置箭头图像

2 个答案: