19

私は現在、うまく機能しているTwitterブートストラップを使用していますが、フォームで使用される「ウェル」要素に凡例を追加したいと思います(フォームのサブセクションを示す複数のウェルを持つことができるように)。

私のフォームが今どのように見えるかの例は次のとおりです。

ここに画像の説明を入力

たとえば、「詳細」見出しの下に 2 つの別々のセクションを作成できるように凡例を追加したいと思いますが、それらの目的を示すことができます。伝説はこれを行うための最良の方法のようです。

HTML の関連セクションは次のようになります。

<form>
   <div class="row">
        <div class="span6">
        <div class="nonboxy-widget">
            <div class="widget-head">
                <h5>Details</h5>
            </div>
            <div class="widget-content">
                 <div class="widget-box">
                    <div class = 'form-horizontal well'>
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label">Sale Type</label>
                                <div class="controls">

凡例タグをフィールドセットまたはdivwith クラスに追加しようとするform-horizontal wellと、通常の HTML 凡例ではなく、ボックス内の見出しのようにレンダリングされます。次のようにレンダリングされます。

ここに画像の説明を入力

コードで

<div class = 'form-horizontal well'>
  <fieldset>
    <legend>Details</legend>
    <div class="control-group">

ボックスの境界で、これを通常の凡例のようにレンダリングする方法を誰かが推奨できますか?

編集: Simbirsk のコードのおかげで、次のようになりました。

ここに画像の説明を入力

これはかなり近いですが、私が望んでいたのは、凡例をフィールドセットの通常の html 凡例のように見せること (つまり、境界線に収まるようにすること) だったので、CSS を次のように変更しました。

legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}

しかし、それはこれをもたらしました：

ここに画像の説明を入力

通常のフィールドセットの凡例のように、ウェルの境界線が「切れる」(テキストの後ろに表示されない) ようにするにはどうすればよいですか?

編集2:最初の回答の編集に続いて、コードをcssに適用すると、次のようになりました:

ここに画像の説明を入力

これは私が探していたものではないことに気付くでしょう-フィールドセット自体ではなく、ウェル div の境界で凡例を取得しようとしています (これはネストされたフォームであるため、1 つのウェル内に複数のフィールドセットが存在する可能性があります。そのため、フィールドセット自体に境界線を設定することはできません)。

上記のコードでこれを達成したようですが、唯一の問題は、凡例がある境界線を区切ることでした-これは、凡例テキストの背景にある種の不透明度と少しのパディングで行うことができますか?

さらに提案はありますか？

ありがとう！

4

2 に答える 2

44

.wellを配置し、Bootstrapとスタイルfieldsetをオーバーライドします。 HTMLlegendfieldset

<form>
    <fieldset class="well the-fieldset">
        <legend class="the-legend">Your legend</legend>
        ... your inputs ...
    </fieldset>
</form>

CSS

.the-legend {
    border-style: none;
    border-width: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
}
.the-fieldset {
    border: 2px groove threedface #444;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

注: 行、スパン、コントロールなどの Bootstrap クラスは省略しました。レイアウトに合わせて使用​​してください。編集:スタイル「リセット」
を含むようにコードを変更しました。fieldset

于 2012-08-29T07:03:35.443 に答える
5

これは、Bootstrap でグループボックスとして達成しようとしていたことでうまくいきました。

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-legend {
  display: block;
  font-size: 14px;
  width: auto;
  padding: 2px 7px 2px 5px;
  margin-bottom: 20px;
  line-height: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
<form>
  <fieldset class="well">
    <legend class="well-legend">Group Box Legend</legend>
    ... your inputs ...
  </fieldset>
</form>

于 2016-08-16T16:32:21.403 に答える