Использовать легенду набора полей с bootstrap
Я использую 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>
для другого поля. На этот раз ширина текста в легенде является проблемой, поскольку она длиннее, чем 100px
.
Итак, что мне делать, чтобы получить результат, как я уже упоминал? (Не ударяя по тексту легенды)
6 ответов
это потому, что 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;
к нему также уменьшить зазор между легендой и разделителем.
У меня была эта проблема, и я решил так:
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;
}
у меня был другой подход, использовал панель bootstrap, чтобы показать ее немного более богатой. Просто чтобы помочь кому-то и улучшить ответ.
.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>
Примечание: нам нужно изменить стили, чтобы использовать другой размер заголовка.
в bootstrap 4 гораздо проще иметь границу набора полей, которая сочетается с легендой. Вам не нужен пользовательский css для его достижения, это можно сделать следующим образом:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
просто хотел суммировать все правильные ответы выше вкратце. Потому что мне пришлось потратить много времени, чтобы выяснить, какой ответ решает проблему и то, что происходит за кулисами.
кажется, есть две проблемы fieldset с bootstrap:
- на
bootstrap
устанавливает ширину вlegend
как 100%. Поэтому накладки верхней границыfieldset
. - здесь
bottom border
наlegend
.
так, все, что нам нужно исправить это-установить ширину легенда для авто следующим образом:
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="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>