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

Question

I am trying to position an image of arrow pointing downwards next to a dropdown select box. I am using Bootstrap 3.0 css.

With the following markup I am able to achieve what I am after but is not responsive (ie when I see it on chrome with mobile mode) the image is shoved below the dropdown.

My markup is below:

<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>

But in Mobile mode it looks like this:

Could you please highlight the issue here?

Answer 1

Not sure of the arrow - but the issue you are describing is simply that you have not set any xs or sm classes on the markup and so the bootstrap default is to display the columns as full rows at the smaller viewports (because you have not specified what to display them at).

You will need to experiment to get the right layout for your needs - but it will have to include col-xs-X and col-sm-X classes in there. Also note that you have nested divs in there - so that the inner col-md-3 is actually 3 columns of the parent column.

<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

Don't use inline styling, put your CSS into a separate file and then include media queries to change the position at different viewports. That way you can control what different screen sizes will see depending on the size of the page. Bootstrap has a lot of responsive elements built-in too like the grid system .

So in this instance, add a class onto your div around the arrow to target that and the image within it like this to move it around where you like, however you can also make use of the grid system to change the width of the select box and the arrow as well.

<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>

I've added a class of select-arrow to the div around the arrow image and also add the col-sm class to both divs which will alter the width on small devices like mobiles. Take a look at the grid options which explains what class you can use and when.

Image of the Grid Options from the Bootstrap docs.