html - 将表单包含在内后，Bootstrap 4 导航选项卡无法正常工作

问题描述

当只有文本并且您单击 nav-tabs 链接时，它会显示所需的内容，但是在将这些表单包含在内之后它就不再起作用了。看起来问题是表单集成。这是代码：

<ul class="nav nav-tabs tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Free Values</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">check</a>
              </li>
            </ul>
 <div class="tab-content">
                  <div role="tabpanel" class="tab-pane fade in active show" id="profile">
                      <label for="name" class="control-label float-left">From</label>
                      <div class="input-group">

                            <input type="text" class="form-control" value="United Kingdom" aria-label="Text input with dropdown button">
                            <div class="input-group-prepend">
                                <button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                    <div role="separator" class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                </div>
                              </div>
                        </div>
                    </div>
                    <label for="name" class="control-label float-left">To</label>
                        <div class="input-group">

                              <input type="text" class="form-control" value="US" aria-label="Text input with dropdown button">
                              <div class="input-group-prepend">
                                  <button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                      <div role="separator" class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                  </div>
                                </div>
                          </div>
                          <div class="input-group">
                              <input type="text" class="form-control" value="981" aria-label="Text input with dropdown button">
                              <div class="input-group-prepend">
                                  <button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EURO</button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                      <div role="separator" class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                  </div>
                                </div>
                          </div>

                          <div class="input-group text-center " >
                              <input type="text" class="form-control"  value="Cash To Cart" aria-label="Text input with dropdown button" style="color:#fff; margin:0; background-color:#222222; border-color:#323F49;

                               border-top-left-radius: 8px; border-bottom-left-radius: 8px; height:50px">
                              <div class="input-group-prepend">
                                  <button class="btn  btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                      <div role="separator" class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                  </div>
                                </div>
                          </div>
                          <input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="100.000">
                  </div>
                  <div role="tabpanel" class="tab-pane fade" id="buzz">
<input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="728">
</div>

                </div>
          </div>
        </div>

当您单击第二个选项卡时，第一个选项卡内容仍然存在，并且第二个选项卡上的输入要么不出现，要么出现在其外部两个选项卡的底部。我怎样才能解决这个问题并使标签正常工作？

标签： htmltwitter-bootstrapbootstrap-4input-fieldbootstrap-tabs

html - 将表单包含在内后，Bootstrap 4 导航选项卡无法正常工作

问题描述

解决方案

推荐阅读