Используйте 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>

Это даст ниже взгляд.

Примечание: нам нужно изменить стили, чтобы использовать другой размер заголовка.

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

Кажется, есть две проблемы fieldset с начальной загрузкой:

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

Итак, все что нам нужно исправить это установить ширину легенды в авто следующим образом:

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