CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
senzacionale
senzacionale

Reputation: 20916

Bootstrap v2 template does not work on small monitors, in big one is ok. What to use instead of class "col-sm-3"

This is my search template for web page. I am using bootstrap. Everything is ok in big screens but now in small ones. How can fix it for small ones to?

I am using bootsrap2 and class "span3". In bootstrap3 I can use "col-sm-3" but here in versuion 2 does not exist. What can I do?

<div class="well">
    <div class="row-fluid">
        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.FirstNameAndLastName, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.FirstNameAndLastName, new { @class = "input-xlarge focused" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.SelectedWorkCatgoryId, new { @class = "control-label" })
                @Html.DropDownListFor(x => x.SelectedWorkCatgoryId, Model.ViewModel.WorkCategories, Translations.Global.SELECT, new { @data_rel = "chosen", @class = "dropdown-input-xlarge" })
            </div>
        </div>
        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.WorkNumber, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.WorkNumber, new { @class = "input-xlarge focused" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.SelectedStudentCategoryId, new { @class = "control-label" })
                @Html.DropDownListFor(x => x.SelectedStudentCategoryId, Model.ViewModel.WorkTypes, Translations.Global.SELECT, new { @data_rel = "chosen", @class = "dropdown-input-xlarge" })
            </div>
        </div>
        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.WorkStartOn, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.WorkStartOn, new { @id = "workdStartOn", @datepicker = true, @class = "input-xlarge focused datepicker" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.SelectedWorkType, new { @class = "control-label" })
                @Html.DropDownListFor(x => x.SelectedWorkType, Model.ViewModel.WorkTypes, Translations.Global.SELECT, new { @data_rel = "chosen", @class = "dropdown-input-xlarge" })
            </div>
        </div>

        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.WorkEndOn, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.WorkEndOn, new { @id = "workdEndOn", @datepicker = true, @class = "input-xlarge focused datepicker" })
                <button class="btn btn-primary pull-right" type="submit" id="submitBttn">
                    <i class="fa fa-search"></i> @Translations.Global.SEARCH
                </button>
            </div>
        </div>
    </div>
</div>

Images:

This is OK enter image description here

And this is not OK enter image description here

Upvotes: 0

Views: 41

Answers (1)

ak_
ak_

Reputation: 2815

".span3" has a fixed width of 270px. You probably want to add ".row-fluid" which will give you a span3 width of about 23%.

You can download the full bootstrap 2 zipfile here: http://getbootstrap.com/2.3.2/ Reading through the unminified CSS may answer more of your questions.

Hope that helps!

Upvotes: 1

Related Questions