Bootstrap 4 导航下拉列表问题

Question

我正在为我的大学项目开发一些 Navs 表格，我使用了 bootstrap@4.0.0-beta，这是我的问题，我选择了 Book item，navs正在处理中选中Child项，重复Navs项详情后再次点击Organais项，即可查看。我在 jsfiddle 中附加了我的代码。请看我的代码https://jsfiddle.net/9qsacmr4/4/

看看我的问题中显示一些红色线条的图像谢谢

Answer 1

看来您的代码重复的 ID 过多。 id 属性必须是唯一的。我已经用数字重命名了一些你重复的 id。并删除了不需要的 </div>

inputState -> inputState2 和 inputState3

检查更新的 jsfiddle

编辑：用静态文本替换了表单内容。

编辑 2：使用所有 3 种形式

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content-wrapper">
  <div class="container-fluid"> 
    
    <!-- section-two-->
    <div class="agrarian-section-addnewaccount" style="margin-top: -0.5rem;">
      <div class="row">
        <div class="col-md-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item dropdown"> 
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Select Your Account Type </a>
              <div class="dropdown-menu"> 
                <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">Book</a> 
                <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">Organais</a> 
                <a class="dropdown-item" id="pills-dropdown3-tab" href="#pills-dropdown3" role="tab" data-toggle="pill" aria-controls="pills-dropdown3">Child</a> 
              </div>
            </li>
          </ul>
          
          <!-- tab section-->
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">              
              <!-- tab section  head-->              
              <div class="row">
                <div class="col-sm-12">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                      <p class="WD-txt-hd">Individual Account</p>
                    </li>
                  </ol>
                </div>
              </div>              
              <!-- tab section  head-->              
              <div class="row">
                <div class="col-sm-12">
                  <div class="card">
                    <form>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputAccNum" class="col-form-label">Account Number</label>
                          <input type="text" class="form-control" id="inputAccNum" placeholder="Account Number">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputGivName" class="col-form-label">Given Name</label>
                          <input type="text" class="form-control" id="inputGivName" placeholder="Given Name">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputSurName" class="col-form-label">Sure Name</label>
                          <input type="text" class="form-control" id="inputSurName" placeholder="Sure Name">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputOthName" class="col-form-label">Other Name</label>
                          <input type="text" class="form-control" id="inputOthName" placeholder="Other Name">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputInd-DOB" class="col-form-label">Date of Birth</label>
                          <div class="input-group input-append date" id="datePicker-IndDOB" >
                            <input type="text" class="form-control" name="date" value="" placeholder="DOB" />
                            <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div>
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputGENDER" class="col-form-label">Gender</label>
                          <br>
                          <label class="custom-control custom-radio">
                            <input id="radio1" name="radio" type="radio" class="custom-control-input">
                            <span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label>
                          <label class="custom-control custom-radio">
                            <input id="radio2" name="radio" type="radio" class="custom-control-input">
                            <span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputNIC" class="col-form-label">NIC </label>
                          <input type="text" class="form-control" id="inputNIC" placeholder="NIC">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputADD" class="col-form-label">Residential Address</label>
                          <textarea class="form-control" id="exampleFormControlTextarea1" rows="1" placeholder="Address"></textarea>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputCity" class="col-form-label">City</label>
                          <input type="text" class="form-control" id="inputCity">
                        </div>
                        <div class="form-group col-md-4">
                          <label for="inputState" class="col-form-label">State</label>
                          <select id="inputState" class="form-control">
                            <option selected>Select your state</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            <option value="4">Four</option>
                            <option value="5">Five</option>
                            <option value="6">Six</option>
                            <option value="7">Seven</option>
                            <option value="8">Eight</option>
                            <option value="9">Nine</option>
                            <option value="10">Ten</option>
                          </select>
                        </div>
                        <div class="form-group col-md-2">
                          <label for="inputZip" class="col-form-label">Zip</label>
                          <input type="text" class="form-control" id="inputZip">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputMobile" class="col-form-label">Mobile</label>
                          <input type="text" class="form-control" id="inputMobile" placeholder="Mobile">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputTeli" class="col-form-label">Teliphone</label>
                          <input type="text" class="form-control" id="inputTeli" placeholder="Teliphone">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputSrvCentre" class="col-form-label">Services Centre</label>
                          <select id="inputStatetwo" class="form-control">
                            <option selected>Select your Services Centre</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            <option value="4">Four</option>
                            <option value="5">Five</option>
                            <option value="6">Six</option>
                            <option value="7">Seven</option>
                            <option value="8">Eight</option>
                            <option value="9">Nine</option>
                            <option value="10">Ten</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab"> 
              <!-- tab section  head-->
             <div class="row">
                <div class="col-sm-12">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <p class="WD-txt-hd">Organaisational Account</p>
                    </li>
                  </ol>
                </div>
              </div>
              
              <!-- tab section  head-->
              
              <div class="row">
                <div class="col-sm-12">
                  <div class="card">
                    <form>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputOrgAccNum" class="col-form-label">Account Number</label>
                          <input type="text" class="form-control" id="inputOrgAccNum" placeholder="Account Number">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputOrgName" class="col-form-label">Organisation Name</label>
                          <input type="text" class="form-control" id="inputOrgName" placeholder="Organisation Name">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputOrgOpenerName" class="col-form-label">Account Opener  Name</label>
                          <input type="text" class="form-control" id="inputOrgOpenerName" placeholder="Account Opener  Name">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputOrgOpenrMobile" class="col-form-label">Account Opener Mobile</label>
                          <input type="text" class="form-control" id="inputOrgOpenrMobile" placeholder="Account Opener  Mobile">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputOrgDOB" class="col-form-label">Organisation Started Date</label>
                          <div class="input-group input-append date" id="datePicker-OrgDOB" >
                            <input type="text" class="form-control" name="date" value="" placeholder="Organisation Started Date" />
                            <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div>
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputOrgStatus" class="col-form-label">Organisation Status</label>
                          <input type="text" class="form-control" id="inputOrgStatus" placeholder="Organisation Status">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputOrgRegNumber" class="col-form-label">Organisation Reg: Number </label>
                          <input type="text" class="form-control" id="inputOrgRegNumber" placeholder="Organisation Reg: Number">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputOrgADD" class="col-form-label">Organisation Address</label>
                          <textarea class="form-control" id="OrgADD" rows="1" placeholder="Organisation Address"></textarea>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputCity" class="col-form-label">City</label>
                          <input type="text" class="form-control" id="inputCity2">
                        </div>
                        <div class="form-group col-md-4">
                          <label for="inputState2" class="col-form-label">State</label>
                          <select id="inputState2" class="form-control">
                            <option selected>Select your state</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            <option value="4">Four</option>
                            <option value="5">Five</option>
                            <option value="6">Six</option>
                            <option value="7">Seven</option>
                            <option value="8">Eight</option>
                            <option value="9">Nine</option>
                            <option value="10">Ten</option>
                          </select>
                        </div>
                        <div class="form-group col-md-2">
                          <label for="inputZip" class="col-form-label"> Zip </label>
                          <input type="text" class="form-control" id="inputZip" />
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputOegEmail" class="col-form-label"> Organisation Email </label>
                          <input type="email" class="form-control" id="inputOrgEmail" placeholder="Organisation Email">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputOrgTeli" class="col-form-label"> Teliphone </label>
                          <input type="text" class="form-control" id="inputOrgTeli" placeholder="Organisation Teliphone">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputSrvCentre" class="col-form-label"> Services Centre </label>
                          <select id="inputStatetwo2" class="form-control">
                            <option selected>Select your Services Centre</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            <option value="4">Four</option>
                            <option value="5">Five</option>
                            <option value="6">Six</option>
                            <option value="7">Seven</option>
                            <option value="8">Eight</option>
                            <option value="9">Nine</option>
                            <option value="10">Ten</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div  class="tab-pane fade" id="pills-dropdown3" role="tabpanel" aria-labelledby="pills-dropdown3-tab"> 
              
             <div class="row">
                <div class="col-sm-12">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <p class="WD-txt-hd">Children Account</p>
                    </li>
                  </ol>
                </div>
              </div>
              
            <div class="row">
                <div class="col-sm-12">
                  <div class="card">
                    <form>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputOrgAccNum" class="col-form-label">Account Number</label>
                          <input type="text" class="form-control" id="inputOrgAccNum2" placeholder="Account Number">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputChildGivName" class="col-form-label">Given Name</label>
                          <input type="text" class="form-control" id="inputChildGivName" placeholder="Given Name">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputChildOpenerName" class="col-form-label">Sure Name</label>
                          <input type="text" class="form-control" id="inputChildOpenerName" placeholder="Sure Name">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputChildOpenrOther" class="col-form-label">Other Name</label>
                          <input type="text" class="form-control" id="inputChildOpenrOther" placeholder="Other Name">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputChildDOB" class="col-form-label">Date Of Birth</label>
                          <div class="input-group input-append date" id="datePicker-ChildDOB" >
                            <input type="text" class="form-control" name="date" value="" placeholder="DOB" />
                            <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div>
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputChildGENDER" class="col-form-label">Gender</label>
                          <br>
                          <label class="custom-control custom-radio">
                            <input id="Childradio1" name="radio" type="radio" class="custom-control-input">
                            <span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label>
                          <label class="custom-control custom-radio">
                            <input id="Childradio2" name="radio" type="radio" class="custom-control-input">
                            <span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputChildADD" class="col-form-label">Residential Address</label>
                          <textarea class="form-control" id="ChildADD" rows="1" placeholder="Residential Address"></textarea>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputCity" class="col-form-label">City</label>
                          <input type="text" class="form-control" id="inputCity3">
                        </div>
                        <div class="form-group col-md-4">
                          <label for="inputState3" class="col-form-label">State</label>
                          <select id="inputState3" class="form-control">
                            <option selected>Select your state</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            <option value="4">Four</option>
                            <option value="5">Five</option>
                            <option value="6">Six</option>
                            <option value="7">Seven</option>
                            <option value="8">Eight</option>
                            <option value="9">Nine</option>
                            <option value="10">Ten</option>
                          </select>
                        </div>
                        <div class="form-group col-md-2">
                          <label for="inputZip" class="col-form-label">Zip</label>
                          <input type="text" class="form-control" id="inputZip2">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputChildMobie" class="col-form-label">Mobile</label>
                          <input type="Text" class="form-control" id="inputChildMobile" placeholder="Mobile">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputChildTeli" class="col-form-label">Teliphone</label>
                          <input type="text" class="form-control" id="inputChildTeli" placeholder="Teliphone">
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="inputChildGuardianName" class="col-form-label">Guardian Name</label>
                          <input type="text" class="form-control" id="inputChildGuardianName" placeholder="Guardian Name">
                        </div>
                        <div class="form-group col-md-6">
                          <label for="inputSrvCentre2" class="col-form-label">Services Centre</label>
                          <select id="inputStatetwoe2" class="form-control">
                            <option selected>Select your Services Centre</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                            <option value="4">Four</option>
                            <option value="5">Five</option>
                            <option value="6">Six</option>
                            <option value="7">Seven</option>
                            <option value="8">Eight</option>
                            <option value="9">Nine</option>
                            <option value="10">Ten</option>
                          </select>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button>
                    </form>
                  </div>
                </div>
              </div>
             
            </div>
          </div>
          
          <!-- /tab section--> 
          
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

试试这个

添加 J-query 脚本并添加 java script 然后添加 select box for drop down。 select box drop down 值集 main form div class。示例：<select> <option value="book">Book</option> </select> <div class="book box"> 将表格放在此处

检查下方 Link

示例 - https://jsfiddle.net/DEVPIYUSH/98rb0xsf/

Bootstrap 4 导航下拉列表问题

Bootstrap 4 Navs Drop Down List Issue

javascript

css

twitter-bootstrap-4