Gunakan Fieldset Legend dengan bootstrap

Saya menggunakan Bootstrap untuk JSPhalaman saya .

Saya ingin menggunakan <fieldset>dan <legend>untuk formulir saya. Ini kode saya.

<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 adalah

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;
}

Saya mendapatkan output seperti ini

Saya ingin keluaran dengan cara berikut

Saya mencoba menambahkan

border:none;
width:100px;

untuk legend.scheduler-borderdi CSS. Dan saya mendapatkan hasil yang diharapkan. Tetapi masalahnya adalah saya ingin menambahkan yang lain <fieldset>untuk bidang lain. Waktu itu lebar teks dalam legenda adalah masalah karena lebih panjang dari pada 100px.

Jadi apa yang harus saya lakukan untuk mendapatkan hasil seperti yang saya sebutkan? (Tanpa menyerang teks legenda)

Itu karena Bootstrap secara default menetapkan lebar legendelemen menjadi 100%. Anda dapat memperbaikinya dengan mengubah Anda legend.scheduler-borderjuga menggunakan:

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

Contoh JSFiddle .

Anda juga harus memastikan bahwa stylesheet kustom Anda ditambahkan setelah Bootstrap untuk mencegah Bootstrap mengganti style Anda - meskipun gaya Anda di sini harus memiliki kekhususan yang lebih tinggi.

Anda mungkin juga ingin menambahkannya margin-bottom:0;untuk mengurangi jarak antara legenda dan pembagi.

Dalam bootstrap 4, jauh lebih mudah untuk memiliki batas pada bidang yang menyatu dengan legenda. Anda tidak perlu custom css untuk mencapainya, itu bisa dilakukan seperti ini:

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

yang terlihat seperti ini:

Saya punya masalah ini dan saya pecahkan dengan cara ini:

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;
}

Saya memiliki pendekatan yang berbeda, menggunakan panel bootstrap untuk menunjukkannya sedikit lebih kaya. Hanya untuk membantu seseorang dan meningkatkan jawabannya.

.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>

Ini akan memberikan tampilan di bawah ini.

Catatan: Kita perlu mengubah gaya untuk menggunakan ukuran tajuk yang berbeda.

Singkatnya, saya ingin merangkum semua jawaban yang benar di atas. Karena saya harus menghabiskan banyak waktu untuk mencari tahu jawaban mana yang menyelesaikan masalah dan apa yang terjadi di balik layar.

Tampaknya ada dua masalah fieldset dengan bootstrap:

1. The bootstrapmenetapkan lebar ke legend100%. Itu sebabnya ia menutupi batas atas fieldset.
2. Ada bottom borderuntuk legend.

Jadi, yang perlu kita perbaiki adalah mengatur lebar legenda ke otomatis sebagai berikut:

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