在字段集图例标题旁边添加图标

Question

我想在字段集标题的右侧添加一个图标。但是我得到了： 边界不好，你能帮我正常工作吗，但不能用boostrap

.legend_icon {
  display: block;
  margin: 0 0 30px;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 1px groove;
}

<fieldset class="legend_icon">
  <legend>
    je suis une legende
  </legend>
  test
</fieldset>

enter image description here

Answer 1

使用legend{width: fit-content!important;}覆盖引导程序声明width:100%

.legend_icon {
  display: block;
  margin: 0 0 30px;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 1px groove;
}
legend{
    width: fit-content!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<fieldset class="legend_icon">
  <legend>
    je suis une legende
  </legend>
  test
</fieldset>