user6276867 user6276867 - 4 months ago 24
jQuery Question

How to set fixed auto width in tab-content bootstrap?

I have a search box forms using bootstrap CSS which are included several columns based on category selection.
First I would like to add all columns in same line and set auto width to them accordingly



.col-lg-12 {
width: 100%;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-md-6 {
width: 50%;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.form-group {
margin-bottom: 15px;
}
.tab-content {
position: relative;
}

<div class="tab-content">
<form style="margin-top:-20px" method="GET" action="">
<div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 go-right">
<div class="form-group">
<img src="http://elizavetababanova.com/wp-content/uploads/2015/06/blue-number-1-md.png" style="width:30px">
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-12 col-sm-12">
<div class="form-group">
<img src="http://www.orangecoastcollege.edu/student_services/counseling/SiteAssets/Pages/DegreeWorks-Plan---Priority-Registration/number-2-orange-md.png" style="width:30px">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 go-right">
<div class="form-group">
<img src="http://www.clipartbest.com/cliparts/9cz/E6X/9czE6XLRi.png" style="width:30px">
</div>
</div>
<div class="clearfix"></div>
</form>
</div>





This is short example for my code, but there are many columns in my search box, how to set CSS that all columns will be in same line and also auto width


I want to show all columns in same line and automatically adjust sizes
based on width, even if we will have more columns then it will be adjusted to the auto width. Auto set width even for each columns and also for all columns. like the images in below


For example if we will have 6 sections then auto re-size and set to width 100%

enter image description here

and if we will only three sections, then it will be set to width 100%

enter image description here

Answer

Well, I think there is a misunderstanding around Bootstrap CSS here.

If you want to use bootstrap, you don't have to override his rules, specially like you do.

The "col" 's classes in bootstrap are used to define how an element will be displayed on your page whatever the device.

Here's a little explanation to the class suffixes :

  • The "lg" stand for "Large" (Large screen, desktops)
  • The "md" stand for "Medium" (Medium devices, it can be desktops too)
  • The "sm" stand for "Small" (Tablets)
  • The "xs" stand for "Extra small" (Phones)
  • The number stand for the space it would take on the screen (12 is the maximum)

So you don't have to override the rules, just use them correctly. For example, i've made a JSFiddle, where you can find somthing similar to what you are looking for : https://jsfiddle.net/valentinho14/etdsruy4/

And for good practices, please follow the most common ways to write this rules(it's actually the order from phones to desktop) :

<div class="col-xs-X col-sm-X col-md-X col-lg-X"></div>

If you don't need all of them, or you want to set the same size whatever the device, use to smaller rules :

<div class="col-xs-6"></div>
<!-- it will take 50% of the screen on Phones, Tablets and desktop

To have more informations about this, please check the official bootstrap doc, it will explain you all the details of the grid system : http://getbootstrap.com/css/#grid