부트 스트랩과 함께 Fieldset Legend 사용

내 JSP페이지에 Bootstrap을 사용하고 있습니다.

사용 <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-borderCSS한다. 그리고 예상되는 결과를 얻었습니다. 그러나 문제는 <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 예제 .

또한 부트 스트랩 이후에 사용자 정의 스타일 시트를 추가 하여 부트 스트랩이 스타일을 대체하지 못하도록해야합니다. 여기에서 스타일은 더 높은 특이성을 가져야합니다.

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받는 폭 설정 legend으로서 100 %. 이것이의 상단 테두리를 오버레이하는 이유 fieldset입니다.
2. 있다 bottom border을 위해 legend.

따라서이 문제를 해결하기 위해 범례 너비를 다음과 같이 자동으로 설정하면됩니다.

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