Выкарыстоўвайце Fieldset Legend з пачатковай загрузкай

Я выкарыстоўваю Bootstrap для майго JSP старонкі.

I want to use

and for my form. This is my code.

Start Time <div class="control-group"> <div class="controls bootstrap-timepicker"> <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" /> </div> </div>
 

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

I am getting output like this enter image description here

Я хачу, каб вынік наступным чынам

enter image description here

Я паспрабаваў дадаць

border:none;
width:100px;

to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another

for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.

Так што я павінен зрабіць, каб атрымаць выхад, як я ўжо казаў? (Без ўдару тэксту легенды)

135
Код, які вы падзяліліся, здаецца, працуе добра. Вось Fiddle
дададзена аўтар Aquillo, крыніца
@JamesDonnelly Заўважыў таксама, што гэта выклікана Bootstrap;)
дададзена аўтар Aquillo, крыніца
@Aquillo ваш Fiddle не выкарыстоўвае Bootstrap.
дададзена аўтар James Donnelly, крыніца
Я думаю, вы павінны разгледзець пытанне аб выкарыстанні панэлі Bootstrap ст. Яна мае вельмі падобнае паводзіны як FIELDSET і легенды, але больш стыльныя.
дададзена аўтар Chandra Destiawan, крыніца

6 адказы

Гэта таму, што Bootstrap па змаўчанні ўсталёўвае шырыню легенды элемента да 100%. Вы можаце гэта выправіць, змяніўшы legend.scheduler мяжу таксама выкарыстоўваць:

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

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

Вы можаце таксама дадаць Ніжняе поле: 0; да яго, а таксама скараціць разрыў паміж легендай і дзельніка.

182
дададзена
Ftr: для мяне Bootstrap 3.3.6 таксама ўсталяваць Ніжняе поле: 20px; на Легенда , які штурхнуў яго вышэй Fieldset мяжы, замест таго, каб змясціць яго на лініі , Ўстаноўка Ніжняе поле: 0; на звычаі legend.scheduler-мяжа зафіксавана, што лёгка.
дададзена аўтар dtk, крыніца

У мяне была гэтая праблема, і я вырашыў з гэтым спосабам:

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;
}
14
дададзена

У мяне быў іншы падыход, якія выкарыстоўваюцца самазагрузкі панэлі, каб паказаць яго крыху больш багатым. Проста, каб дапамагчы каму-то і палепшыць адказ.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Title

 
      
Your Code </div> </div> <div>
</div> </div>

This will give below look. enter image description here

Note: We need to change the styles in order to use different header size.

12
дададзена

У загрузніку 4 значна лягчэй мець мяжу на FIELDSET, якая змешвае з легендай. Вам не трэба прыстасаваныя CSS, каб дасягнуць яго, гэта можна зрабіць так:

Your Legend
 

which looks like this: bootstrap 4 fieldset and legend

7
дададзена

Проста хацеў, каб сумаваць усе правільныя адказы вышэй карацей. Таму што мне прыйшлося выдаткаваць шмат часу, каб высветліць, які адказ вырашае гэтую праблему і тое, што адбываецца за кулісамі.

Там, здаецца, дзве праблемы FIELDSET з пачатковай загрузкі:

    <�Літый> Элемент самазагрузкі ўсталёўвае шырыню ў Легенда 100%. Менавіта таму ён перакрывае верхнюю мяжу FIELDSET .
  1. Там ёсць ніжняя мяжа для Легенда .

Такім чынам, усё, што нам трэба выправіць гэта ўсталяваць шырыню легенды для аўто наступным чынам:

legend.scheduler-border {
   width: auto;//fixes the problem 1
   border-bottom: none;//fixes the problem 2
}
3
дададзена

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Title

 
      
Your Code </div> </div> <div>
</div> </div>

0
дададзена