How to resize a button on a mobile device?

Question

I am trying to create a responsive application with twitter bootstrap.
I've added a search-bar with a few dropdowns and 2 search buttons.
I would like to display the bar with the elements in-line in a browser (desktop) and maximize the size of each field when displayed on a mobile device.

I don't have any kind of problem with the desktop version:

but I cannot achieve what I want when the windows is resized (mobile)

the dropdowns are ok but I don't know how to have the same effect with the search buttons.
My dropdowns are have a class span2 defined. Can I use the same class for a button ?
At the beginning of my experiment I was using a navbar but I couldn't achieve what I wanted.

Some HTML here:

    <div class="container">
        <form action="/Home/Search" id="formSearchServices" method="post" class="form-inline">
            <input id="SearchViewModel_SearchText" name="SearchViewModel.SearchText" type="hidden" value="" />

            <div class="row-fluid">
                <select class="selectpicker span2" id="SearchViewModel_Select1" name="SearchViewModel.Select1">
                    <option value="0">** Choose **</option>
                    <option value="1">Option1</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select2" name="SearchViewModel.Select2">
                    <option value="0">** Choose **</option>
                    <option value="1">Option1</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select3" name="SearchViewModel.Select3">
                    <option value="0">** Choose **</option>
                    <option value="1">Option1</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select4" name="SearchViewModel.Select4">
                    <option value="0">** Choose **</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select5" name="SearchViewModel.Select5">
                    <option value="0">** Choose **</option>
                </select>
                <button type="submit" class="btn btn-inverse span1">Search</button>
                <a class="btn btn-small btn-info" data-toggle="collapse" href="#AdvancedSearch">Advanced search</a>

            </div>
            <div id="AdvancedSearch" class="collapse span12">

            </div>
        </form>
    </div>

I've created a fiddle for that.

Thanks.

Answer 1

I've decided not to use a regular navbar but create a custom one.

    <div class='searchbar'>
        <div class='searchbar-inner'>
            <div class='container'>
                <ul class="nav">
                    <li>
                        <select class="selectpicker span2" id="SearchViewModel_Select1" name="SearchViewModel.Select1">
                            <option value="0">** Choose **</option>
                            <option value="1">Option1</option>
                        </select>
                    </li>
                    <li>
                        <select class="selectpicker span3" id="SearchViewModel_Select2" name="SearchViewModel.Select2">
                            <option value="0">** Choose **</option>
                            <option value="1">Option1</option>
                        </select>
                    </li>
                    <li>
                        <button type="submit" class="btn btn-inverse">
                            Search
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn collapsed btn-small btn-info" data-toggle="collapse" href="#AdvancedSearch">
                            Advanced search 
                        </button>
                    </li>                       
                </ul>
            </div>
        </div>
    </div>

and this is the css:

.searchbar {
    overflow: visible;
    margin-bottom: 5px;
    *position: relative;
    *z-index: 2;
}

.searchbar-inner {
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    .clearfix();
}

.searchbar .container {
    width: auto;
}

.searchbar .nav > li {
    float: left;
}

.searchbar .nav > li {
    padding: 5px 5px 5px 5px;
}

@media only screen and (max-width: 767px) {
    .searchbar .nav > li {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;.box-sizing(border-box);
        padding: 0;
    }

    .searchbar .nav > li > button.btn, input[type="submit"].btn {
        float: none;
        display: block;
        width: 100% !important;
    }

    .searchbar .nav > li > [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
        -moz-box-sizing: border-box;
        display: block;
        float: none;
        margin-left: 0;
        width: 100%;
    }

}

This is the working fiddle this.

Answer 2

Are you familiar with how media queries are used in Bootstrap Responsive? Below a certain point those buttons are set to 100% width. You just need to override as desired.

http://jsfiddle.net/isherwood/TYNsB/1/

[class*="span"], .uneditable-input[class*="span"], .row-fluid[class*="span"] {
    width: 100px !important;
}

Here I've pounded my override into place with !important, but you should really adjust the media queries to do what you want at various sizes. This is just to get you started.