مشکل در مشخص کردن ستون های فرد برای bootstrap

[ab.ali]

سلام، من یک row دارم با پنج تا ستون، حالا این 12 تا اصلی رو چطور بین 5 تا تقسیم کنم؟؟:متفکر:

[2undercover]

شما می تونید از قسمت Customize سایت Bootstrap (http://getbootstrap.com/customize)، تعداد ستون ها توی یک ردیف رو تغییر بدید، فاصله ی بین اون هارو کم و زیاد بکنید و خیلی چیز های دیگه.

[mmdsharifi]

سلام، من یک row دارم با پنج تا ستون، حالا این 12 تا اصلی رو چطور بین 5 تا تقسیم کنم؟؟:متفکر:

راه حل اول (ساده):

می تونید از کلاس offset استفاده کنید،که با عث می شه 1 واحد به سمت جلو شیفت پیدا کنه:


<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>

راه حل دوم:
واسه اینکه 100% صفحه رو بخوایم به قسمت تقسیم کنیم هر قسمت 20% رو پر می کنه.حالا میام کلاس های مربوط به 4 حالت ویو می نویسیم.


.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}[/CSS]

و بعدش کمی مدیا کوئری:راست چین شده


[CSS]
.col-xs-5ths {
width: 20%;
float:right;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: right;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: right;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: right;
}
}

اینم از روش استفاده:


<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>

منبع:http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap
و دمو:http://jsfiddle.net/fx2k7/5/