Html 如何在下拉引导旁边放置箭头图像

我试图在下拉选择框旁边放置一个向下箭头的图像。我使用的是Bootstrap3.0CSS

通过以下标记，我能够实现我所追求的目标，但没有响应（即，当我在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>

包裹
{{package.Description}}

但在移动模式下，它看起来是这样的：

---

请在此处突出显示该问题好吗？

不确定箭头-但您描述的问题只是您没有在标记上设置任何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>

包裹
{{package.Description}}

---

不确定箭头-但您描述的问题只是，您没有在标记上设置任何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>

包裹
{{package.Description}}

---

不要使用内联样式，将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>

包裹
{{package.Description}}

我在箭头图像周围的div中添加了一个select arrow类，并在两个div中都添加了

col sm

类，这将改变手机等小型设备的宽度。请看一看说明可以使用什么类以及何时使用的

---

引导文档中网格选项的图像。

不要使用内联样式，将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>

包裹
{{package.Description}}

我在箭头图像周围的div中添加了一个select arrow类，并在两个div中都添加了

col sm

类，这将改变手机等小型设备的宽度。请看一看说明可以使用什么类以及何时使用的

---

引导文档中网格选项的图像。

效果很好，谢谢谢谢谢谢谢谢我尝试过接受它，但SO说我需要等待2分钟才能接受答案。效果很好，谢谢谢谢谢谢谢谢谢谢我尝试过接受它，但SO说我需要等待2分钟才能接受答案。