15

質問は Twitter Bootstrap フォームに関するものです。左の列 (ラベル付き) を 140px より広くするための推奨される方法はありますか? モバイル デバイスでも見栄えがすることが重要です。

お勧めいただきありがとうございます。

4

3 に答える 3

5

Bootstrap v2.1.1では、.control-label幅は次のforms.lessように定義されます。

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

@horizontalComponentOffsetブートストラップをインポートした後、プロジェクトのLESSコードの変数定義をオーバーライドできますvariables.less。特定のページでこれが必要な場合は、そのページのLESSで実行してください。それ以外の場合は、共通のインポートを追加するか、variables.lessBootstrapの事前定義された変数をオーバーライドすることを目的とした独自のファイルを追加します。

モバイルに関しては、必要に応じて、メディアクエリを使用@horizontalComponentOffsetしてモバイルデバイスに異なる価値を与えることができます。

于 2012-11-23T15:47:18.620 に答える
3

いくつかの方法を試しました。また、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;
}
于 2012-04-06T07:27:04.753 に答える
0

編集することを忘れないでください 

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

Forms.lessでも同様

これは変数として設定する必要があると思います。

私はそれをforms.lessで修正しました（2つの新しい変数はvariables.lessに設定されています）：

// 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's 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;
  }
}
于 2012-07-20T13:10:18.240 に答える