Як я можу контролювати ширину тегу мітки?

Тег мітки не має властивості 'width', тож як я повинен контролювати ширину мітки мітки?

Звичайно, використовуючи CSS ...

label { display: block; width: 100px; }

widthАтрибут є застарілим, і CSS завжди повинен бути використаний для управління цих видів презентаційних стилів.

Використовувати вбудований блок краще, оскільки він не змушує чергових елементів та / або елементів керування малювати у новому рядку.

label {
  width:200px;
  display: inline-block;
}

Вбудовані елементи (наприклад, SPAN, LABEL тощо) відображаються так, що їх висота та ширина обчислюються браузером залежно від їх вмісту. Якщо ви хочете контролювати висоту та ширину, вам потрібно змінити блоки цих елементів.

display: block;робить елемент відображається як суцільний блок (як теги DIV), що означає, що після елемента відбувається розрив рядка (він не є вбудованим). Хоча ви можете використовувати display: inline-blockдля вирішення проблеми розриву рядків, це рішення не працює в IE6, оскільки IE6 не розпізнає вбудований блок. Якщо ви хочете, щоб він був сумісний між веб-браузерами, перегляньте цю статтю: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Надання ширини мітці не є правильним способом. ви повинні взяти одну структуру div або table для управління цим. але все ж, якщо ви не хочете змінювати весь код, то можете використовувати наступний код.

label {
  width:200px;
  float: left;
}

label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}

Ви точно можете спробувати таким чином

.col-form-label{
  display: inline-block;
  width:200px;}

Ви можете надати ім'я класу всім міткам, щоб усі мали однакову ширину:

 .class-name {  width:200px;}

Приклад

.labelname{  width:200px;}

або ви можете просто дати решту етикетки

label {  width:200px;  display: inline-block;}