如何在下拉菜單旁邊放置箭頭圖像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，它解釋了你可以使用什麼類，什麼時候使用。從引導文檔的網格選項的

圖像。