Bootstrap - добавление легенды

В настоящее время я использую twitter bootstrap, который работает хорошо, но я хотел бы добавить легенду к "хорошо" элементам, которые используются в форме (чтобы я мог иметь несколько колодцев, обозначая подразделы на форма).

Пример того, как выглядит моя форма:

Я хотел бы добавить легенду, чтобы, например, иметь два отдельных раздела под заголовком "Подробности", но иметь возможность обозначить, для чего они предназначены. Легенда кажется лучшим способом сделать это.

Соответствующий раздел 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">

Когда я пытаюсь добавить тег легенды к набору полей или div с классом form-horizontal well, он отображает заголовок внутри поля, а не как обычную легенду html. Он отображает:

с кодом

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

Может кто-нибудь порекомендовать способ заставить это сделать как обычную легенду на границе поля?

EDIT: Благодаря коду из Симбирска, теперь у меня есть:

Это довольно близко, но я хотел, чтобы легенда выглядела как обычная легенда html на полевом наборе (т.е. чтобы она сидела на границе), поэтому я изменил CSS на:

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

но это привело к следующему:

Как я могу гарантировать, что граница на колодце "ломается" (не отображается за текстом), как нормальная легенда о полете?

EDIT 2: после редактирования первого ответа я применил код к моему css и в итоге:

Вы заметите, что это не совсем то, что я искал - я пытаюсь получить легенду на границе колодца, а не на самом поле (потому что это вложенная форма, может быть несколько полей в пределах одна колодец, поэтому я не могу поместить границу на сам поле).

Я, похоже, достиг этого с помощью кода выше, единственная проблема заключалась в том, чтобы сломать границу, где есть легенда, - это можно сделать с некоторой непрозрачностью на фоне текста легенды и немного обивка?

Другие предложения?

Спасибо!

Ответ 1

Поместите .well в fieldset и переопределите стили Bootstrap legend и fieldset.
HTML

<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, такие как строки, пролеты, элементы управления и т.д. Используйте их для соответствия вашему макету. EDIT: Изменен код для включения стилей fieldset "reset".

Ответ 2

Это работало для меня в том, чего я пытался достичь как групповой ящик в 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>