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

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类，因此引导程序默认为在较小的视口中将列显示为完整行（因为尚未指定）显示它们的位置）。

您将需要进行实验以获取适合您需求的布局-但其中必须包含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放在单独的文件中，然后包含媒体查询以更改不同视口的位置。 这样，您可以控制根据页面尺寸看到的不同屏幕尺寸。 Bootstrap也内置了许多响应元素，例如网格系统 。

因此，在这种情况下，将一个类添加到箭头周围的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中添加了一个选择箭头类，并且还在两个div中添加了col-sm类，这将改变诸如移动设备之类的小型设备的宽度。 看一下网格选项 ，它说明了可以使用什么类以及何时使用。

Bootstrap文档中的Grid Options图像。