Twitter. Бутстрап-форма. Сделайте ярлык ярлыка более широким.

Ответ 1

В Bootstrap v2.1.1 ширина .control-label определяется в forms.less следующим образом:

.form-horizontal
{
    .control-label
    {
        width: @horizontalComponentOffset - 20;
    }
}

Вы можете переопределить определение переменной @horizontalComponentOffset в коде проекта LESS после импорта bootstrap variables.less. Если вам нужно это для определенной страницы, сделайте это на этой странице МЕНЬШЕ. В противном случае добавьте его в общий импорт или, еще лучше, собственный файл variables.less, предназначенный для переопределения предопределенных переменных Bootstrap.

Что касается мобильных устройств, вы можете использовать медиа-запросы, чтобы при необходимости дать другое значение @horizontalComponentOffset для мобильных устройств.

Ответ 2

Я попробовал несколько способов. Также добавлять стили в html файл, который хорошо смотрится на рабочем столе, но не на мобильных устройствах.

Решение состоит в том, чтобы изменить bootstrap.css(хотя я не уверен, что этот файл предназначен для изменения):

.form-horizontal .control-label {
  float: left;
  /*original: width: 140px;*/
  width: 200px;
  padding-top: 5px;
  text-align: right;
}
.form-horizontal .controls {
  /*original: margin-left: 160px;*/
  margin-left: 220px;
}

Ответ 3

Не забудьте отредактировать

.form-actions {
    padding-left: 160px;
}

а также в формах .less

Это должно быть установлено как переменная, я думаю.

Я изменил это для меня как такового в forms.less(две новые переменные задаются в переменных .less then):

// Horizontal-specific styles
// --------------------------

.form-horizontal {
  // Increase spacing between groups
  .control-group {
    margin-bottom: @baseLineHeight;
    .clearfix();
  }
  // Float the labels left
  .control-label {
    float: left;
    // ub was 140px
    width: @labelWidth;
    padding-top: 5px;
    text-align: right;
  }
  // Move over all input controls and content
  .controls {
    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
    // don't inherit the margin of the parent, in this case .controls
    *display: inline-block;
    // ub was 20px
    *padding-left: @labelPadding;
    // ub was 160px
    margin-left: @labelWidth + @labelPadding;
    *margin-left: 0;
    &:first-child {
      // ub was 160px
      *padding-left: @labelWidth + @labelPadding;
    }
  }
  // Remove bottom margin on block level help text since that accounted for on .control-group
  .help-block {
    margin-top: @baseLineHeight / 2;
    margin-bottom: 0;
  }
  // Move over buttons in .form-actions to align with .controls
  .form-actions {
   // ub was 160px
    padding-left: @labelWidth + @labelPadding;
  }
}