如何在下拉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圖像。