Sử dụng Fieldset Legend với bootstrap

Tôi đang sử dụng Bootstrap cho JSPtrang của mình .

Tôi muốn sử dụng <fieldset>và <legend>cho hình thức của tôi. Đây là mã của tôi.

<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 là

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

Tôi đang nhận được đầu ra như thế này

Tôi muốn đầu ra theo cách sau

Tôi đã thử thêm

border:none;
width:100px;

để legend.scheduler-bordertrong CSS. Và tôi đang nhận được đầu ra mong đợi. Nhưng vấn đề là tôi muốn thêm cái khác <fieldset>cho các lĩnh vực khác. Thời gian đó chiều rộng của văn bản trong truyền thuyết là một vấn đề vì nó dài hơn 100px.

Vậy tôi phải làm gì để có được đầu ra như tôi đã đề cập? (Không có văn bản huyền thoại)

Đó là vì Bootstrap theo mặc định đặt độ rộng của legendphần tử thành 100%. Bạn có thể khắc phục điều này bằng cách thay đổi legend.scheduler-borderthành sử dụng:

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

Ví dụ về JSFiddle .

Bạn cũng cần đảm bảo biểu định kiểu tùy chỉnh của mình được thêm vào sau Bootstrap để ngăn Bootstrap ghi đè lên kiểu dáng của bạn - mặc dù kiểu của bạn ở đây nên có độ đặc hiệu cao hơn.

Bạn cũng có thể muốn thêm margin-bottom:0;vào nó để giảm khoảng cách giữa chú giải và dải phân cách.

Trong bootstrap 4, việc có một đường viền trên bộ trường trộn với huyền thoại sẽ dễ dàng hơn nhiều. Bạn không cần css tùy chỉnh để đạt được nó, nó có thể được thực hiện như thế này:

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

trông như thế này:

Tôi đã có vấn đề này và tôi đã giải quyết theo cách này:

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

Tôi đã có một cách tiếp cận khác, sử dụng bảng điều khiển bootstrap để cho thấy nó phong phú hơn một chút. Chỉ để giúp ai đó và cải thiện câu trả lời.

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

Điều này sẽ cung cấp dưới đây xem.

Lưu ý: Chúng tôi cần thay đổi kiểu để sử dụng kích thước tiêu đề khác nhau.

Chỉ muốn tóm tắt tất cả các câu trả lời chính xác ở trên trong ngắn hạn. Bởi vì tôi đã phải dành nhiều thời gian để tìm ra câu trả lời nào giải quyết vấn đề và những gì đang diễn ra sau hậu trường.

Dường như có hai vấn đề về fieldset với bootstrap:

1. Các bootstrapchiều rộng đặt legendlà 100%. Đó là lý do tại sao nó phủ lên biên giới trên cùng của fieldset.
2. Có một bottom bordercho legend.

Vì vậy, tất cả những gì chúng ta cần khắc phục điều này là đặt chiều rộng chú thích thành tự động như sau:

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