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

Question

我正试图在下拉选择框旁边指向下方的箭头图像。我正在使用Bootstrap 3.0 css。

通过以下标记，我可以实现我所追求的内容，但没有响应（即当我在移动模式下在铬上看到它时）图像被推下。

我标记低于：

<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到一个单独的文件，然后包括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，它解释了你可以使用什么类，什么时候使用。从引导文档的网格选项的

图像。