Question

我想使用legend html标记在表单中直观地包装一组类似的输入。它应该与使用df.groupby('Continents').Populous.describe().unstack()属性而不使用bootstrap like is shown here时的方式类似。

我做了一个bootply示例which is here。正如人们所看到的：我正在尝试创建一个包含名字和姓氏输入字段的图例。造型不对。

我已经看过this question，但它与我的不同，因为我试图在网格中使用图例。

Answer 1

这是一种使用自定义CSS的方法。只需添加此CSS，然后将.customLegend添加到fieldset即可显示此legend的{{1}}。根据需要调整定位，填充等。

.customLegend {
  border: 1px solid #e5e5e5;
  padding: 2em 0 1em;
  margin-top: 2em;
  position: relative;
}
.customLegend legend {
  border: 0;
  background: #fff;
  width: auto;
  transform: translateY(-50%);
  position: absolute;
  top: 0; left: 1em;
  padding: 0 .5em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <form>
    <fieldset class="customLegend row">
      <legend>Enter Your Name</legend>
      <div class="form-group col-sm-6">
        <label for="first_name">First Name:</label>
        <input type="text" class="form-control" id="email">
      </div>
      <div class="form-group col-sm-6">
        <label for="last_name">Last Name:</label>
        <input type="text" class="form-control" id="pwd">
      </div>
    </fieldset>
    
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
    
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

图例标记无法使用Bootstrap网格正确渲染

1 个答案: