Використовуйте Fieldset Legend з завантажувальним інструментом

Я використовую Bootstrap для своєї JSPсторінки.

Я хочу використовувати <fieldset>і <legend>для своєї форми. Це мій код.

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label input-label" for="startTime">Start :</label>
        <div class="controls bootstrap-timepicker">
            <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS є

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
}

Я отримую такий вихід

Я хочу вивести наступним чином

Я спробував додати

border:none;
width:100px;

щоб legend.scheduler-borderв CSS. І я отримую очікуваний вихід. Але проблема в тому, що я хотів би додати ще одне <fieldset>для іншого поля. У той час ширина тексту в легенді є проблемою, оскільки вона довша, ніж 100px.

То що робити, щоб отримати вихід, як я вже згадував? (Не вражаючи текст легенди)

Це тому, що Bootstrap за замовчуванням встановлює ширину legendелемента на 100%. Ви можете виправити це, змінивши ваше legend.scheduler-borderтакож на використання:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

Приклад JSFiddle .

Вам також потрібно забезпечити додавання вашої користувальницької таблиці стилів після Bootstrap, щоб запобігти перекриттю Bootstrap вашої стилізації - хоча ваші стилі тут повинні мати більш високу специфіку.

Ви також можете додати margin-bottom:0;його, щоб зменшити розрив між легендою та дільником.

У завантажувальній службі 4 набагато простіше мати рамку на наборі поля, яка поєднується з легендою. Для цього вам не потрібен спеціальний css, це можна зробити так:

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

що виглядає приблизно так:

У мене була ця проблема, і я вирішив таким чином:

fieldset.scheduler-border {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.scheduler-border {
    width: auto !important;
    border: none;
    font-size: 14px;
}

У мене був інший підхід, я використовував панель завантаження, щоб показати її трохи насиченішою. Просто, щоб допомогти комусь і покращити відповідь.

.text-on-pannel {
  background: #fff none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 3px 5px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #337ab7;
  border-radius: 8px;
}

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-body">
      <h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
      <p> Your Code </p>
    </div>
  </div>
  <div>

Це дасть вигляд нижче.

Примітка. Нам потрібно змінити стилі, щоб використовувати різний розмір заголовка.

Просто хотілося коротко узагальнити всі правильні відповіді. Тому що мені довелося витратити багато часу, щоб зрозуміти, яка відповідь вирішує питання і що відбувається за лаштунками.

Здається, є дві проблеми польового набору з завантажувальним пристроєм:

1. bootstrapВстановлює ширину до legend100%. Ось чому вона перекриває верхню межу поля fieldset.
2. Там bottom borderдля legend.

Отже, все, що нам потрібно це виправити, це встановити ширину легенди для автоматичної роботи наступним чином:

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}