Как выровнять нечетное количество ячеек по центру в Bootstrap 3?

На странице надо организовать ввод кода продукта из трех частей. Примерно так:

[1234]-[5678]-[9012]

Ввод нужен не по маске, а тремя полями ввода, с крупными цифрами. Между полями ввода должен быть нарисован символ-разделитель, например тире.

Ширина одного поля ввода - 3 ячейки. На символ-разделитель отводится одна ячейка. Получается, что итоговая ширина будет 3+1+3+1+3=11 ячеек.

И эти 11 ячеек мне нужно вывести по центру строки row.

У меня версточный кретинизм, я уже как только не пробовал, но передвинуть 11 ячеек в центр row у меня не получается.

Как это сделать?

Для затравки, вот нерабочий код:

Код (Text):

1.         <div class="row">
2.             <div class="center-block col-xs-11" style="float: none; background-color: blue">
3.                 <div class="row">
4.                     <div class="center-block">
5.                         <div class="col-xs-3"><input id="itemIdPart1" type="text" class="form-control"></div>
6.                         <div class="col-xs-1">-</div>
7.                         <div class="col-xs-3"><input id="itemIdPart2" type="text" class="form-control"></div>
8.                         <div class="col-xs-1">-</div>
9.                         <div class="col-xs-3"><input id="itemIdPart3" type="text" class="form-control"></div>
10.                     </div>
11.                 </div>
12.             </div>
13.         </div>

 

Я же вроде про Bootstrap 3 написал. Неужели в 3-й версии это невозможно сделать?

 

Благодарю, так сработало. Но вопрос теперь такой. Взял ваш код, но на любой ширине экрана блоки шириной 1 в колонку имеют такую же ширину что и блок из 3 колонок. Почему так?

Вот скриншот:

 

Ага, разобрался. Если добавить задний фон для всех <div>, то можно понять что происходит. Блоки имеют действительно разную ширину. Просто в Bootstrap большие дефолтные padding и margin, так что поля ввода сильно сжаты по горизонтали.