Super User

.col-xs-five,
.col-sm-five,
.col-md-five,
.col-lg-five {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-five {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-five {
        width: 20%;
        float: left;
    }
}

Паддинг выставить по своему усмотрению. Точнее не трогать, если не меняли дефолтный бутстраповский.

Нашел еще один вариант с использованием встроенных классов:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

Если надо на каком-то разрешении выстроить их по вертикали, нужно просто сделать display: block классу .btn-group

Answer 4 · 2015-11-07 18:19:35

function getWidthOfText(txt, fontname, fontsize) {
  var c=document.createElement('canvas');
  var ctx=c.getContext('2d');
  ctx.font = fontsize + 'px' + fontname;
  var length = ctx.measureText(txt).width;
  return length;
}

Или:

function getWidthOfText(txt, fontname, fontsize){
  var e=document.createElement('span');
  jQuery(e).text(txt);
  jQuery(e).css({
    'font-size': fontsize,
    'font-family': fontname
  });
  jQuery(e).width();
  delete e;
  return width;
}

Или:

function getWidthOfText(txt, fontname, fontsize){
  var e = document.createElement('span');
  e.style.fontSize = fontsize;
  e.style.fontFamily = fontname;
  e.innerHTML = txt;
  return e.innerWidth;
}