CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike P.
Mike P.

Reputation: 1930

Bootstrap 3 column sensible stacking plus floated right element

I'm attempting to use Bootstrap 3's col layout in order to have 3 columns of drop-downs that stack sensibly on small screens. However, I'm getting odd results when I attempt this.

What I need to have happen is for all 3 dropdowns (and their labels) to stack under one another in a sensible fashion when the viewport is narrowed.

Here's how I want it to look:

enter image description here

However, as you can see from this fiddle, it doesn't work that way at all: enter image description here

Either they overlap due to the float:left, or the dropdown and the label break up and wind up on seperate lines.

http://jsfiddle.net/g8u45rmz/1/

The code is very straight-forward:

<div class="col-xs-4">
  <span class='select-subfolder-label'>Subfolder:</span>
        <select id='test2' class='folder-sel'>
             <option>All</option>
        </select>
</div>

In addition, I need the glyph icon on the right side to always be floated right, even when the columns are stacked the way I want.

How can I achieve these two objectives? Help is appreciated.

Upvotes: 1

Views: 114

Answers (2)

Ashesh
Ashesh

Reputation: 3589

simply adding a form-control class on select will get the desired result.

For stacked select menu on smaller window, adding class col-xs-12 to parent div will work. This will make the div use up all the width available to it on small devices. Also for small and medium sized window I have used col-sm-4 and col-md-4, this will change it so that all divs appear inline.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class='row subnav'>
  <div class="col-xs-12 col-sm-4 col-md-4">	<span class='select-folder-label'>Folder:</span>

    <select class="form-control" id='test1' class='folder-sel'>
      <option>All</option>
    </select>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4">	<span class='select-subfolder-label'>Subfolder:</span>

    <select class="form-control" id='test2' class='folder-sel'>
      <option>All</option>
    </select>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4">	<span class='select-other-label'>Other:</span>

    <select class="form-control" id='test2' class='folder-sel'>
      <option>All</option>
    </select>
  </div>
  <div id="subnav_gear" class='dropdown nav navbar navbar-nav navbar-right'> <span class='glyphicon glyphicon-cog'></span>

  </div>
</div>

Upvotes: 1

Quintile
Quintile

Reputation: 343

The 'col-xs-4' class basically says, 'even on extra small screens, this takes up 4 of the 12 columns.

Try using col-md-4 or col-sm-4, when the screen enters xs range, it'll switch to full width and stack as expected.

Upvotes: 3

Related Questions