부트스트랩과 함께 필드셋 범례 사용

부트스트랩과 함께 필드셋 범례 사용

저는 부츠트랩을 사용하고 있습니다.JSP페이지입니다.

저는 제 폼을 위해 사용하고 싶습니다.이건 내 암호입니다.

<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에서그리고 예상 생산량을 얻고 있습니다.그러나 문제는 다른 분야에 대해 추가하고 싶다는 것입니다.범례의 텍스트 폭이 다음보다 길기 때문에 문제가 됩니다.100px.

그래서 제가 언급한 것처럼 출력을 얻으려면 어떻게 해야 합니까?(전설 텍스트를 누르지 않음)

이는 부트스트랩이 기본적으로 시스템의 너비를 설정하기 때문입니다.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;
}

JS 피들 fid.

부트스트랩이 스타일을 재정의하는 것을 방지하기 위해 부트스트랩 후 사용자 지정 스타일시트가 추가되는지 확인해야 합니다. 하지만 여기서 사용하는 스타일은 보다 구체적이어야 합니다.

추가할 수도 있습니다.margin-bottom:0;전설과 분할자 사이의 간격을 줄이기 위해서도 말입니다.

부트스트랩 4에서는 필드 세트에 범례와 혼합되는 테두리를 갖는 것이 훨씬 쉽습니다.이를 달성하기 위해 맞춤형 CSS가 필요하지 않으며, 다음과 같이 수행할 수 있습니다.

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

다음과 같이 보입니다.

부트스트랩 5에서 범례에 적용된 기본 스타일을 수정하면 부트스트랩 4에서 얻은 것과 다른 렌더링이 생성됩니다. 그런 다음 추가해야 합니다.float-none의 부류로서<legend>태그:

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
   <legend  class="float-none w-auto p-2">Your Legend</legend>
   <input type="text">
</fieldset>
</form>

부츠끈 html 형태 필드 세트 전설을

저는 이런 문제가 있었고 이런 식으로 해결했습니다.

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폭을 다음으로 설정합니다.legend100%로그것이 그것이 그것의 상단 테두리를 덮는 이유입니다.fieldset.
2. 뭐가 있어요.bottom border를 위해legend.

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

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

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;
  margin-top: 30px !important;
}

legend.scheduler-border {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin-top: -15px;
  background-color: white;
  color: black;
}

<div class="container">
    <fieldset class="scheduler-border">
        <legend class="scheduler-border">Technical Ameen</legend>
        <h2>Your Work Here</h2>
    </fieldset>
</div>

부트스트랩 5에서 범례 태그를 사용하기 위한 적절한 해결책을 찾지 못할 경우

범례 태그에서 대체 솔루션을 위해 CSS 속성을 사용할 수 있습니다. 이것은 인라인 CSS 예입니다.

style="margin-top:-15px; background-color: white; color: black;"

또한 이 선을 여백 상단에 대한 필드 세트 태그에 추가합니다.

 style="margin-top: 30px !important;"

부트스트랩 5로 레전드 스타일을 얻는 아주 간단한 솔루션이면 좋겠습니다.

<fieldset  class="border p-2 form-group">
   <legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>

CSS 사용:

.customer-legend:before {
    left: 100px;
}

언급URL : https://stackoverflow.com/questions/16852484/use-fieldset-legend-with-bootstrap