Я использую Bootstrap для моей страницы JSP
.
Я хочу использовать <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;
to legend.scheduler-border
в CSS. И я получаю ожидаемый результат. Но проблема в том, что я хотел бы добавить еще один <fieldset>
для других полей. В то время ширина текста в легенде является проблемой, так как она длиннее 100 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;
}
Вам также нужно будет убедиться, что пользовательская таблица стилей добавляется после Bootstrap, чтобы предотвратить загрузку Bootstrap, но ваш стиль должен иметь более высокую специфичность.
Вы также можете добавить к нему margin-bottom:0;
, чтобы уменьшить разрыв между легендой и разделителем.
margin-bottom: 20px;
на legend
, которая выдвинула его выше границы набора полей, вместо того, чтобы поместить его на линию. Установка margin-bottom: 0;
на legend.scheduler-border
исправлена, что легко.
У меня была эта проблема, и я решил таким образом:
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="/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>
Это будет выглядеть ниже.
Примечание. Нам нужно изменить стили, чтобы использовать разные размеры заголовка.
В бутстрапе 4 гораздо проще иметь границу на поле, которая сочетается с легендой. Для этого вам не нужен пользовательский css, он может быть выполнен следующим образом:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
который выглядит следующим образом:
Просто хотел кратко изложить все правильные ответы выше. Потому что мне пришлось потратить много времени, чтобы выяснить, какой ответ решает проблему и что происходит за кулисами.
Кажется, есть две проблемы с fieldset с бутстрапом:
bootstrap
устанавливает ширину в legend
как 100%. Именно поэтому он накладывает верхнюю границу fieldset
.bottom border
для legend
.Итак, все, что нам нужно исправить, это установить ширину легенды в auto следующим образом:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
.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="/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>