Fieldset Legend'i bootstrap ile kullanma

Sayfam için Bootstrap kullanıyorum JSP.

Formumu kullanmak <fieldset>ve kullanmak istiyorum <legend>. Bu benim kodum.

<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 (şimdiki değeri)

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

Böyle çıktı alıyorum

Çıktıyı şu şekilde istiyorum

Eklemeyi denedim

border:none;
width:100px;

için legend.scheduler-borderCSS'deki. Ve beklenen çıktıyı alıyorum. Ama sorun şu ki <fieldset>, başka alanlar için bir tane daha eklemek istiyorum . Bu sefer, göstergede metnin genişliği, bundan daha uzun olduğu için bir sorundur 100px.

Bahsettiğim gibi çıktı almak için ne yapmalıyım? (Gösterge metnine çarpmadan)

Çünkü Bootstrap varsayılan olarak legendelemanın genişliğini % 100 olarak ayarlar . Bunu, legend.scheduler-borderaşağıdakileri de kullanarak değiştirerek düzeltebilirsiniz :

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 örneği .

Ayrıca, Bootstrap'in stilinizi geçersiz kılmasını önlemek için Bootstrap'tan sonra özel stil sayfanızın eklendiğinden emin olmanız gerekir - buradaki stilleriniz daha yüksek özgüllüğe sahip olmalıdır.

margin-bottom:0;Efsane ve bölücü arasındaki boşluğu azaltmak için de eklemek isteyebilirsiniz .

Bootstrap 4'te, saha setinde efsane ile karışan bir kenarlığa sahip olmak çok daha kolaydır. Bunu başarmak için özel css gerekmez, bu gibi yapılabilir:

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

ki şuna benzer:

Bu sorunu yaşadım ve şu şekilde çözdüm:

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

Farklı bir yaklaşımım vardı, biraz daha zengin göstermek için bootstrap panelini kullandım. Sadece birine yardım etmek ve cevabı geliştirmek için.

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

Bu aşağıdaki görünümü verecektir.

Not: Farklı başlık boyutu kullanmak için stilleri değiştirmemiz gerekir.

Sadece yukarıdaki tüm doğru cevapları kısaca özetlemek istedim. Çünkü hangi cevabın sorunu çözdüğünü ve sahne arkasında neler olduğunu anlamak için çok zaman harcamak zorunda kaldım.

Önyükleme ile ilgili iki alan kümesi sorunu var gibi görünüyor:

1. bootstrapGenişliği ayarlar legendolarak% 100. Bu nedenle, üst sınırını kaplar fieldset.
2. Bir var bottom borderiçin legend.

Yani, bunu düzeltmek için ihtiyacımız olan tek şey efsane genişliğini aşağıdaki gibi otomatik olarak ayarlamaktır:

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