47

Bootstrapを使用してスタイルを設定したい編集可能フィールドと読み取り専用フィールドが混在するフォームがあります。次のスクリーンショットに示すように、編集可能なフィールドは正しく配置されていますが、読み取り専用フィールドは配置されていません。

読み取り専用フィールド

私が使用しているHTMLは次のとおりです。

<form class="form-horizontal">
<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls">
    John Smith
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="date_of_birth">Date of Birth</label>
  <div class="controls">
    <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
    <span class="help-inline">dd/mm/yyyy</span>
  </div>
</div>
</form>

ボックスをクリックできないとユーザーが混乱したりイライラしたりするため、編集できないフィールドには読み取り専用の入力を表示したくありません。これらは編集できないフィールドであるため、それらを無効/読み取り専用として表示することは実際には意味がありません。テキストを表示して、ラベルと正しく位置合わせしたいだけです。Bootstrapで何かを使用するか、デフォルトのスタイルをオーバーライドすることで、これを行う方法はありますか？

私の質問はこれに似ていますが、回答されていません（少なくとも元の質問への回答ではありません）。Bootstrapは過去7か月間に複数のリリースがあったため、何かが変更された場合に備えてもう一度質問する価値があると思いました。 。

4

7 に答える 7

114

ブートストラップ3.0の時点で、これを処理するためのクラスが追加されました

水平フォーム内のフォームラベルの横に通常の静的テキストを配置する必要がある場合は、.form-control-staticクラスを使用します。<p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>
于 2013-08-14T19:54:08.460 に答える
22

独自のスタイルを作成し、以下のように適用します-

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrapはすべての不測の事態をカバーするわけではなく、独自のスタイルを作成する必要があります。

于 2012-11-09T15:43:59.207 に答える
2

Bootstrap 3を使用している場合は、必ずform-control-staticクラスを使用してください。それがオプションでない場合は、クラスを使用してcontrol-label、太字のフォントの太さを削除する別のクラスを作成できます。

あなたのhtmlで：

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

あなたのCSSで：

.static-text {
    font-weight: normal;
}

HTMLの属性の後にstatic-textクラスをリストするようにしてください。これは、によって確立されたものをオーバーライドするためです。 control-labelclassfont-weightcontrol-label

あなたの場合、フォントサイズを調整することもできます。

もちろん、ブートストラップによってクラスのCSSプロパティが変更されたcontrol-label場合は、戻ってstatic-textクラスを調整する必要があります。

于 2016-07-29T20:34:02.970 に答える
1

@pwaringが言ったように、私にとってはもっとスタイリングも必要でした：

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

<div class="controls readonly">
    Lorem Ipsum and then some
  </div>
于 2014-08-25T13:44:46.310 に答える
1

Simonの投稿に追加display: inline-block;するために、CSSに追加しました。

これは、ラベルとテキストの表示を一致させるためです。

于 2014-10-06T15:11:55.943 に答える
0

これは、chris vdpの回答を使用しており、chrisの回答が盲目的に明白であるとは思わなかった人々（ノルウェーの私やEduardoなど）に完全なHTMLを提供しています。

必要以上のコードを表示している可能性がありますが、上記のソリューションは、ほとんどの場合必要な「コピーアンドペーストレベル」ではないことがわかりました。:-)私が知っている何かをあなたに提供したかったのですが、目がくらむほど明白な方法であなたのコードに貼り付けることができます。この構造をHTMLのどこかに配置するだけです。

注：これはBootstrap 3で機能し、Bootstrap3が必要です。

<form class="form-horizontal" role="form">
    <div class="control-group">
        <label for="personName" class="control-label col-sm-2">Name</label>
        <div class="controls col-sm-10">
            <p id="personName" class="form-control-static">John Smith</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label>
        <div class="controls">
            <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
            <span class="help-inline col-sm-3">dd/mm/yyyy</span>
        </div>
    </div>
</form>
于 2016-12-30T02:46:05.750 に答える
-1

controlsクラスを拡張できます。

<style>
.controls.aligncorrect{
  padding-top: 5px;
}
</style>

そしてそれをこのように使用します：

<div class="controls aligncorrect" style="padding-top:5px;">
    John Smith
  </div>
于 2012-11-09T12:07:47.943 に答える