html - 在引导程序中切换字段集组件

Question

我有一些嵌套的 json 数据，我想将它们保存在字段集中，默认显示选项是隐藏它们。我有这个例子http://jsfiddle.net/jnvq9twr/

<div class="card">
  <div class="card-header">
    My Account
  </div>
  <div class="card-body">
 <form>
 <div class="row">
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="nam" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="nme" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="ne" placeholder="Ime">
    </div>

    </div>
        <fieldset class="row border p-2">
   <legend  class="w-auto">Business Data</legend>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="ne" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="ne" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <select class="form-control"><option>USA</option><option>Canada</option></select>
    </div>
    </fieldset>
</form> 
  </div>
</div>

我正在考虑在最右边的字段集线内隐藏或显示。是否可以在右侧的第二个图例中有一个按钮，或者该字段集是否只包含一个图例？

标签： htmlcsstwitter-bootstrap

Answer 1

以这种方式解决了http://jsfiddle.net/v3foLhsn/1/

的CSS

    .card-header{
        background-color:#324148 !important;
        color:white !important;
    }
    .form-control{
        width:80% !important;
    }
    #toggle + #content {
    display: none;
}
#content{
    width:100% !important;
}
#toggle:checked + #content {
    display:block;
}
    legend {
    width: 85%;
    border: 1px solid black;
    padding: 3px 6px;
    cursor: pointer;
}

legend label {
    width: 100%;
    display: inline-block;
    cursor: inherit;
}

legend label::after {
    content: "▼";
    float: right;
}
.gml{
    margin-left:2% !important;
}
.w-auto{
    width:50% !important;
}

html

<div class="card">
  <div class="card-header">
    My Account
  </div>
  <div class="card-body">
 <form>
 <div class="row">
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="nam" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="nme" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="ne" placeholder="Ime">
    </div>

    </div>
        <fieldset class="row border p-2">
   <legend  class="w-auto"><label for="toggle">Business Data</label> </legend>
     <input type="checkbox" id="toggle" checked="" hidden=""/>
     
      <div id="content">
      <div class="row">
    <div class="form-group col-md-3">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="ne" placeholder="Ime">
    </div>
    <div class="form-group col-md-3">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="ne" placeholder="Ime">
    </div>
    <div class="form-group col-md-3">
        <label for="name" class="control-label">Padding Bottom</label>
        <select class="form-control"><option>USA</option><option>Canada</option></select>
    </div>
    <div class="form-group col-md-3">
        <label for="name" class="control-label">Padding Bottom</label>
        <select class="form-control"><option>USA</option><option>Canada</option></select>
    </div>
    </div>
    </fieldset>
</form> 
  </div>
</div>
        </div>