html - 如何在下拉 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 类，因此 Bootstrap 默认设置是在较小的视口(viewport)中将列显示为完整行(因为您没有指定显示它们的位置)。

您将需要进行试验以获得适合您需要的布局 - 但它必须在其中包含 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>